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

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添加到基于TS官方医生的tsconfig.json中。

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

然后添加一个简单的组件(T：\Test.tsx\src\components\Test.tsx)

import React from "react";

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

export default Test;

最后，我将测试组件导入到App.tsx中。

但它不允许我使用绝对路径：

import Test from "components/Test";

我知道这个错误

​

然而，如果使用相对路径，则应用程序在dev & build模式下工作，没有任何错误：

import Test from "./components/Test";

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

Answer 1

这里有两个问题：

• 告诉类型记录如何解析导入路径
• 告诉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插件resolve.alias vite-tsconfig-路径 ，它使您不必手动配置

Answer 2

我通过搜索结果来到这里，我在寻找不同的东西，即如何做一个简单的绝对导入，比如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中，路径看起来是绝对的。如果根dir中有另一个目录，与/src相邻，则需要为该目录添加另一个别名。

Answer 3

@Yuns解决方案工作，但在vscode中显示错误。它破坏了vs代码中的自动导入。

为了使它在vscode和vite中都工作，我在tsconfig和vite.config中都添加了别名。

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


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

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

import Header from '@/components/Header.svelte