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 @路径报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- vite+vue3项目启动报错Unexpected “%“问题及解决
- vue3项目中配置sass,vite报错Undefined mixin问题
- vue3+vite+vant项目下按需引入vant报错Failed to resolve import的原因及解决方案
- vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法
- vue3+vite:src使用require动态导入图片报错的最新解决方法
- vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...
- Vue3之Vite中由element ui更新导致的启动报错解决
- vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案
- vite+vue3项目报错:TypeError: Promise.allSettled is not a function