vite+vue3使用@路径报错处理
作者：云隙阳光i
本文主要介绍了vite+vue3使用@路径报错处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
报错原因：未配置 @符号为指定路径别名，直接使用导致
处理方法：
安装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" }]
}
最后重新运行项目
到此这篇关于vite+vue3使用@路径报错处理的文章就介绍到这了,更多相关vite vue3 @路径报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！