绝对路径在 Vite 项目 React TS 中不起作用

Question

我正在努力寻找在 Vite react-ts 项目中工作的绝对路径。

这是我创建项目的方式

npm init @vitejs/app
npx: installed 6 in 1.883s
√ Project name: ... test-vite
√ Select a framework: » react
√ Select a variant: » react-ts

然后我将 baseUrl 添加到 tsconfig.json 基于TS official doc:

{
  "compilerOptions": {
    "baseUrl": "./src",
    ...

接着添加一个简单的组件（T:\test-vite\src\components\Test.tsx）

import React from "react";

const Test = () => <h1>This is a Test.</h1>;

export default Test;

最后我将 Test 组件导入到 App.tsx
但它不会让我使用绝对路径：

import Test from "components/Test";

我收到此错误

而如果我使用相对路径，该应用程序可以在 dev 和 build 模式下运行而不会出现任何错误：

import Test from "./components/Test";

如何使绝对路径在项目中起作用？

Answer 1

这里有两个问题：

• 告诉 typescript 如何解析导入路径
• 告诉vite如何构建导入路径

你只告诉 typescript 如何解决，但 vite 不知道如何构建。所以参考官方文档resolve.alias，也许这就是你想要的：

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

您可以像这样导入路径（或./src下的任何模块）：

import Test from "@/components/Test";
import bar from "@/foo/bar"

而且你可以直接使用vite插件vite-tsconfig-paths，这样你就不用手动配置resolve.alias了