大家应该知道在Vue2的时候项目中@路径可以直接使用,不需要额外配置,但是Vue3中却需要手动配置,下面是配置方法
1. 首先 npm install @types/node --save-dev(需要用到node其中的path模块和__dirname)
2. 然后在vite.config.ts文件中进行配置,配置信息如下
import { defineConfig } from 'vite'
// 引入path
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: './',
/* 路径配置 */
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, './src'),
}
]
}
})
3. 如果你没有用TS到这里就已经可以了,但是因为TS的类型检查会报错,所以下面的配置是为了解决TS不识别@的问题
{
"compilerOptions": {
/* 省略其他配置... */
"paths": { // @ 路径配置
"@/*": [ "src/*" ]
}
}
}