TypeScript 路径别名不适用于 Vite

Question

大家好，我已经使用 Vite CLI 创建了简单的 TypeScript 项目。不幸的是，这样做时，Vite 没有生成我可以用来向我的项目添加路径别名的

vite.config

。

我想要达到的目标：

我只想用

"@/*"

而不是

"./src/*"

。

我的 tsconfig.json：

{
  "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,
    "moduleDetection": "force",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Path alias */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", "types/global.d.ts"]
}

再次没有

vite.config

，因为我使用此 CLI 命令来生成项目：

bun create vite my-ts-app --template vanilla-ts

我尝试向我的

tsconfig.json

文件添加路径别名选项并重新启动 VSCode 和 TS Server，但没有成功：

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

Answer 1

弄清楚吧。

您需要创建一个名为：

vite.config.ts

的新文件并将其添加到其中：

import { defineConfig } from "vite";
import { resolve } from "node:path";

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});