绝对路径在 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;

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

import Test from "components/Test";

我收到这个错误

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

import Test from "./components/Test";

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

Answer 1

这里有两个问题：

告诉打字稿如何解析导入路径
告诉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

Answer 2

@Yuns 解决方案有效，但在 vscode 中显示错误。它在 vs 代码中打破了 auto-import。

为了让它在 vscode 中工作并同时引用两者，我在 tsconfig 和 vite.config 中都添加了别名。

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}


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

然后，我可以像下面这样导入（svelte 应用程序在 src 目录中）

import Header from '@/components/Header.svelte

Answer 3

我是通过搜索结果来到这里的，我在寻找不同的东西，即如何做一个简单的绝对导入，比如 import { foo } from 'src/lib/foo.ts'

所以如果你有一个包含所有代码的 /src 目录并且想使用绝对导入路径。

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

注意这是一个技巧：src 是一个别名，因此在 Vite 中看起来路径是绝对的。如果根目录中有另一个目录，与 /src 相邻，则需要为该目录添加另一个别名。

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

Absolute path not working in Vite project React TS

typescript

reactjs

vite