vite配置别名，并处理报错：找不到模块“xxx”或其相应的类型声明

1、配置vite.config.ts文件2、配置tsconfig.json文件

---

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" }]}

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。