在开发vue+vite+ts项目时使用npm init vite@latest my-vue-app -- --template vue-ts搭建项目
在vite.config.ts配置@
resolve: {
alias: {
"@": join(__dirname, "src"),
},
},
配置完后在页面中执行不会报错但是一直有提示错误，build时也会报错找不到该模块无法识别该路径
一般遇到这个问题是需要到tsconfig.json中配置paths
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"moduleResolution": "node"
},
但是配置完了发现还是不行，这是因为./tsconfig.app.json的问题，直接去掉tsconfig.json文件references中的引用即可
{
"files": [],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [
// { "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
}
然后你就发现正常了
还有就是在vite.config.ts中引用path中的resolve或者join等会提示报错，是因为默认执行环境是浏览器环境，但是vite.config.ts是在node.js环境中运行所以无法找到path的包。需要安装@type/node包即可
