如何在 Vite 中使用 Typescript 路径别名？

Question

@/shared/types如何像在 Vite 项目中一样设置和使用 TypeScript 路径别名？我收到此错误：Failed to resolve import "@/shared/types"

这是我的一部分tsconfig.json：

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

Answer 1

有一个插件可以做到这一点vite-tsconfig-paths：你跑

npm install --save-dev vite-tsconfig-paths

并将其导入您的vite.config：

// ...
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
});

https://www.npmjs.com/package/vite-tsconfig-paths

Answer 2

您需要配置vite.config.ts和tsconfig.json文件。您tsconfig.json看起来是正确的，但在vite.config.ts文件内您需要导入path模块并使用诸如path.resolve(). 并确保删除所有星号字符 (*)！

例如，如果你的tsconfig.json看起来像这样：

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

那么您应该如何配置vite.config.ts：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "../"),
      "@server": path.resolve(__dirname, "../server/src"),
    },
  },
  plugins: [react()],
});

您可能需要从 导入 React '@vitejs/plugin-react'，具体取决于您在创建应用程序时选择的选项。