vue3+typescript项目配置路径别名@
·
1. vite.config.ts配置
//方法1
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
});
//方法2,需要执行npm install -D @types/node
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL} from 'node:url';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
});
2. tsconfig.json配置
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
注意:如果项目不是单一的 tsconfig.json,而是使用了分包 tsconfig,即有tsconfig.app.json,tsconfig.node.json文件,则需将上述配置在tsconfig.app.json中。
只需配置如上两个文件即可,需重启项目npm run dev,或重启vscode。
成功!

更多推荐



所有评论(0)