vue3+ts（vue）----配置@别名

vue3+ts（vue）----配置@别名

1.在项目中安装 vite 和 @vitejs/plugin-legacy：

npm install vite @vitejs/plugin-legacy --save-dev

2.找到项目根目录下 的tsconfig.json 文件，并在 compilerOptions 中添加以下配置：
（其中，baseUrl 是基础路径，用于解析非相对模块路径的基础目录。paths 包含了多个映射，用于映射不同的模块路径。）

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["src/*"],
    },
    ...
  },
  ...
}

3.在 vite.config.ts 中使用 @vitejs/plugin-legacy 插件，并在 alias 中配置 @ 别名：

import {
    
     defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
    
    
  plugins: [
    legacy({
    
    
      targets: ['defaults', 'not IE 11'], // 支持的浏览器版本
    }),
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': '/src',
    },
  },
});

4.在页面中使用：（例子）

import {
    
     createApp } from 'vue';
import App from '@/App.vue';

createApp(App).mount('#app');