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

如何解决绝对路径在 Vite 项目 React TS 中不起作用

我正在努力获得在 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;

最后，我在 App.tsx
中导入了 Test 组件 但它不会让我使用绝对路径：

import Test from "components/Test";

我收到此错误

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

import Test from "./components/Test";

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

解决方法

这里有两个问题：

• 告诉打字稿如何解析导入路径
• 告诉 vite 如何构建导入路径

你只告诉打字稿如何解决，但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