vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解
更新时间:2022年11月22日 10:31:15 作者:大橘为重¨
我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,这篇文章主要给大家介绍了关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明的相关资料,需要的朋友可以参考下
1、配置vite.config.ts文件
安装 “@types/node” 模块,用于处理别名不生效问题
npm i @types/node -D
修改 “vite.config.ts” 文件,配置别名
import { defineConfig } from 'vite' import { resolve } from 'path'; import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: [ { find: '@', // 别名 replacement: resolve(__dirname, 'src'), // 别名对应地址 }, { find: 'components', replacement: resolve(__dirname, 'src/components'), } ] } })
2、配置tsconfig.json文件
- 这一步是用来解决 “报错:找不到模块“xxx”或其相应的类型声明” 的
- 配置 “baseUrl 和 paths” 项
- paths 里的内容根据别名来进行相关配置
{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "moduleResolution": "Node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "skipLibCheck": true, "baseUrl": ".", "paths": { "@/*":["src/*"], "components":["src/components/*"], "_pinia/*":["src/pinia/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] }
总结
到此这篇关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法的文章就介绍到这了,更多相关vite配置别名并处理报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能
这篇文章主要介绍了element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,项目中用到了vue的element-ui框架,用到了el-tree组件,由于数据量很大,使用了数据懒加载模式,即异步树,需要的朋友可以参考下2022-08-08基于vue-upload-component封装一个图片上传组件的示例
这篇文章主要介绍了基于vue-upload-component封装一个图片上传组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-10vue element-plus中el-input修改边框border的方法
element样式还是蛮好的,只是有时候我们需要做一些调整,比如el-input的边框,下面这篇文章主要给大家介绍了关于vue element-plus中el-input修改边框border的相关资料,需要的朋友可以参考下2022-09-09
最新评论