使用 TypeScript 在 Vite 项目中设置路径别名

在深层嵌套的文件中，使用路径别名来引用项目中的关键目录非常方便。例如，看一下这个虚构的 Vite TypeScript 项目的结构：

.
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.tsx
│   ├── assets
│   │   ├── image.png
│   ├── components
│   │   ├── ComponentA
│   │   │   └── ComponentA.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

假设我们要从导入image.png。ComponentA.tsx我们的导入应该如下所示：

import image from '../../../assets/image.png';

不太好。如果结构嵌套很深，路径可能会更长。如果我们能给关键文件夹添加别名，并像这样操作，那就好多了：

import image from `@assets/image.png`

让我们看看如何在 Vite 中做到这一点。

步骤 1 - 向 vite.config.ts 添加别名

我们的第一步是向 Vite（以及 Vite 底层使用的 Rollup）注册别名。我们可以在以下代码中执行此操作vite.config.ts：

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

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },
  plugins: [react()]
})

附注 - 确保npm install -D @types/node避免导入path和使用问题__dirname

src现在，Vite 知道无论何时我们@在导入中使用时都要引用该目录。

第 2 步 - 向 tsconfig.json 添加别名

TypeScript 编译器还需要知道我们的别名，以便它可以编译所有导入的文件。让我们tsconfig.json相应地更新我们的代码：

{
  "compilerOptions": {
    // ... your other compiler options
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    },
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

我们在 our 中添加的内容与上面的语法略有不同vite.config.ts，但思路是一样的。此外，还添加了一个baseUrl属性来指定 ourpaths相对于什么。

这就是全部内容了。现在您可以在导入路径中使用@、@assets和@components。为了简单起见，我在本例中只使用了三个别名，但您可以根据项目需要随意使用任意数量的别名。尽情享受吧！

鏂囩珷鏉ユ簮锛�https://dev.to/tilly/aliasing-in-vite-w-typescript-1lfo