路径别名 | TanStack Start Solid Docs

路径别名是 TypeScript 的一个有用功能，允许您为项目目录结构中可能很远的路径定义快捷方式。这可以帮助您避免代码中的长相对导入，并使重构项目结构变得更容易。这对于避免代码中的长相对导入特别有用。

默认情况下，TanStack Start 不包含路径别名。但是，您可以通过更新项目根目录中的 tsconfig.json 文件并添加以下配置来轻松将它们添加到项目中：

json

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

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

在此示例中，我们定义了路径别名 ~/*，它映射到 ./src/* 目录。这意味着您现在可以使用 ~ 前缀从 src 目录导入文件。

更新 tsconfig.json 文件后，您需要安装 vite-tsconfig-paths 插件以在 TanStack Start 项目中启用路径别名。您可以通过运行以下命令来执行此操作：

npm install -D vite-tsconfig-paths

npm install -D vite-tsconfig-paths

现在，您需要更新 app.config.ts 文件以包含以下内容：

// app.config.ts
import { defineConfig } from '@tanstack/solid-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      // this is the plugin that enables path aliases
      viteTsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/solid-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      // this is the plugin that enables path aliases
      viteTsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})

完成此配置后，您现在可以使用路径别名导入文件，如下所示：

// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'

// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'