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

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

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

且通過  

import router from "@/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}`;
          },
        }]
      })
    ]
  }
})

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