vite+vue3.2项目中使用@路径报错问题及解决
作者：羅森林
文章介绍了解决Vite项目中报错“未配置@符号为指定路径别名”的方法,通过修改vite.config.ts和tsconfig.json文件,配置baseUrl和paths,解决了路径别名未正确解析的问题
错误截图
报错原因
未配置 @符号为指定路径别名，直接使用导致
处理方法
安装path模块：
npm install --save-dev @types/node
修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0'
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})修改tsconfig.json：
配置 baseUrl、paths
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}重新运行项目
npm run dev
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。