vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解
作者：大橘为重¨
我在学习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配置别名并处理报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！