引用element-plus时，程序会提示 找不到模块
需要配置tsconfig.js
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}
但是报错了!! 需要安装插件 TypeScript Vue Plugin (Volar) 并禁用 JavaScript 和 TypeScript 的语言功能。
禁用步骤：
ctrl + shift + p 搜索 : built ，选中“拓展：显示内置的拓展”
左侧自动打开拓展页面，在搜索框接着输入 typecript
点击 JavaScript 和 TypeScript 的语言功能 右下角的小齿轮
选择 “禁用（工作区）”，该拓展将在该工作区被禁用
路径使用 @/... 报错
- 在 tsconfig.json 配置：
{
"compilerOptions": {
//...
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
}
}
}
修改后，可能需要重启vscode
重启后检查发现检查不报错了，ctrl + 鼠标左键 也能进行跳转
但是npm run dev 启动后仍然报错，找不到模块，需要执行第二步
- 配置 vite.config.ts
配置前，需要先安装依赖
npm install @types/node
然后在 vite.config.ts 添加配置
import path from 'path' // 需安装此模块 @types/node
export default defineConfig({
//...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})
重新运行项目，成功检测
完整配置文件
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"types": [ "element-plus/global" ],
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需安装此模块
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
}
},
},
})
{
"name": "demo",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.3.12",
"typescript": "^5.2.2",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@types/node": "^20.5.9",
"@vitejs/plugin-vue": "^4.2.3",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
}
