vite+vue3.2项目中使用@路径报错问题及解决
更新时间:2025年12月04日 10:38:58 作者:羅森林
文章介绍了解决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
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue 组件(component)教程之实现精美的日历方法示例
组件是我们学习vue必须会的一部分,下面这篇文章主要给大家介绍了关于Vue 组件(component)教程之实现精美的日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
基于Vue3和SpringBoot实现Web实时消息推送功能
这篇文章主要介绍了WebSocket实现实时通信,对比HTTP低效,通过SpringBoot+Vue整合实现消息推送,涵盖聊天、股票等场景,文中有详细的代码示例供大家参考,需要的朋友可以参考下2025-05-05


最新评论