引用element-plus时，程序会提示 找不到模块

需要配置tsconfig.js

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

但是报错了!! 需要安装插件 TypeScript Vue Plugin (Volar) 并禁用 JavaScript 和 TypeScript 的语言功能。

禁用步骤：

1. ctrl + shift + p 搜索 : built ，选中“拓展：显示内置的拓展”

2. 左侧自动打开拓展页面，在搜索框接着输入 typecript

3. 点击 JavaScript 和 TypeScript 的语言功能 右下角的小齿轮

4. 选择 “禁用（工作区）”，该拓展将在该工作区被禁用

路径使用 @/... 报错

5. 在 tsconfig.json 配置：

{
  "compilerOptions": {
    //...
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

修改后，可能需要重启vscode

重启后检查发现检查不报错了，ctrl + 鼠标左键 也能进行跳转

但是npm run dev 启动后仍然报错，找不到模块，需要执行第二步

6. 配置 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"
  }
}