vite 路径别名（@）配置

1.安装@types/node

   npm i  @types/node

2.vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { join } from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 将 @ 映射到 src 目录
      "@": join(__dirname, "src"),
    },
  },
});

3.tsconfig.json配置

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

4.tsconfig.node.json配置

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",   //相关配置项
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",   //相关配置项 
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

注意：配置好后没有路径提示解决

1.查看vscode有没有安装插件Path Autocomplete

2.删除tsconfig.json中references中path项