1. 程式人生 > 其它 >vue3+ts+vite配置@別名報錯

vue3+ts+vite配置@別名報錯

resolve: {
      alias: {
        "@": path.resolve(__dirname, "src")
      }
    },

如上在vite.config.ts 配置了src別名為@。

且通過

importrouterfrom"@/router"
能正常訪問頁面。 但是! vscode中報錯了,如圖

反覆檢查了很多次,找不到問題。。

————————————————————————————————————————————————————————————————————————————————

分割一下,已解決該問題,

參考自:webpack 設定別名後 tslint報 TS(2307)錯誤_caperxi的部落格-CSDN部落格_ts(2307)

總結:

1. 需要在vite.config.ts 配置別名(附上我的配置檔案全文)

import { defineConfig, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import fs from "fs"
import dotenv from 'dotenv'
import path from 'path'

export default defineConfig(({ mode }: UserConfig): UserConfig => {
  
  const GVA_ENV 
= dotenv.parse(fs.readFileSync(`.env.${mode}`)) return { resolve: { alias: { "@": path.resolve(__dirname, "src") } }, server: { port: Number(GVA_ENV.VITE_BASE_CLI_PORT), // 是否自動在瀏覽器開啟 open: true, // 是否開啟 https https: false, proxy: {
'/api': { target: 'http://localhost:9000/', changeOrigin: true, rewrite: (pathStr) => pathStr.replace('/api', '') } } }, optimizeDeps: { include: [ "element-plus", "element-plus/lib/locale/lang/zh-cn", "dayjs/locale/zh-cn", ], }, build: { // 壓縮 minify: "esbuild", assetsDir: "", outDir: `./dist/${process.env.VITE_ENV}`, }, plugins: [ vue(), styleImport({ libs: [{ libraryName: 'element-plus', esModule: true, ensureStyleFile: true, resolveStyle: (name) => { name = name.slice(3) return `element-plus/packages/theme-chalk/src/${name}.scss`; }, resolveComponent: (name) => { return `element-plus/lib/${name}`; }, }] }) ] } })
View Code

2. 需要在tsconfig.json 配置別名 (也一樣附上)

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
View Code