Vue3+vite 配置路径别名

配置路径别名

在实际开发中，有的组件会嵌套的很深，如果需要引入外层其他目录的组件，需要编写很长一段相对路径。

在vite.config.js里配置，为 /src配置别名@，为

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{
      find: "@",
      replacement: path.resolve(__dirname,'/src')
      //为 /src配置别名@
    }，
    // 可以专门为组件文件路径设置别名
    {
      find: "C",
      replacement: path.resolve(__dirname,'/src/components')
    }
    ]
  }
 
})

以引入组件为例：

// 没有设置别名之前
import HelloWorld from '../components/helloWorld.vue'

// 设置别名之后
import HelloWorld from '@/components/helloWorld.vue'

import HelloWorld from 'C/helloWorld.vue'

PS:如果这样在 ts 项目中以上配置完了之后，还要在tsconfig.json的compilerOptions进行配置 ：

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