如何在 Vite React 应用中创建绝对导入：分步指南

目录

• 介绍

• 问题

• 先决条件

• 设置 Vite React 项目以进行绝对导入

  • 创建 Vite React 应用程序
  • 配置项目以使用绝对导入
  • 配置 VS Code IntelliSense

• 读者实用建议

• 结论

介绍

相对导入是 JavaScript 项目中引用源文件的默认方式。然而，随着代码库变得越来越庞大和复杂，在需要进行更改或调试时，找到正确的源文件可能会变得困难。绝对导入提供了一种清晰一致的方式来定位和引用源文件，从而简化项目的组织和维护。

在本指南中，我将逐步指导您如何在基于 Vite 的 React 应用中创建绝对路径导入。此外，我还会教您如何设置项目、配置Vite.config.js文件以解析应用中的绝对路径导入、如何使用绝对路径导入组件，以及如何配置 vscode Intellisense 以识别绝对路径导入。在本指南结束时，您将学会如何在 Vite React 应用中配置和使用绝对路径导入。

问题

在 React 中构建应用程序时，根据复杂程度和文件结构，import Button from "../../../components/Button";导入组件时的 import 语句最终可能看起来像这样：

如果在重组过程中将Button组件移动到新文件夹，应用程序将崩溃，因为应用程序无法再Button在当前导入路径中找到该组件。因此，需要更新导入路径以反映更改。 

为了解决这个问题，../需要添加一个额外的代码来让应用程序定位Button组件。这意味着，每当代码库发生更改时，所有与更改文件相关的导入语句都必须更新。这可能会导致在调试应用程序时花费更长的时间来尝试定位组件。

另一方面，绝对导入使用固定文件路径引用源文件，而不管导入文件的位置如何。绝对导入可以更轻松地找到所需的源文件，尤其是在较大的代码库中。在基于 Vite 的 React 应用中，您可以通过配置Vite.config.js文件来解析应用中的绝对导入，从而创建绝对导入。例如，Button可以使用以下绝对路径语法导入相同的组件：

import Button from "src/components/Button;

先决条件

• 读者应该已经安装了 Nodejs 和 Vite

• 读者应该熟悉 es6 导入和导出语法。

• 读者还应该了解 React 的基础知识

设置 Vite React 项目以进行绝对导入

要设置 Vite React 项目以支持绝对路径导入，您需要首先使用 Vite 创建一个 React 应用。我将快速引导您完成以下过程：

创建 Vite React 应用程序

要创建 Vite React 应用程序，只需在命令行中运行以下命令：

npm create vite@latest – –template react demo-app

该命令将为我们的 React 应用创建样板代码。我将我的代码命名为demo-app。您可以随意命名您的代码。接下来，我们在命令行中运行以下代码进入项目目录：

cd demo-app

进入项目目录后，运行以下命令来安装应用程序运行所需的所有必要依赖项

npm install

安装依赖项后，只需运行以下命令即可启动开发服务器

npm run dev

如果您正确遵循说明，您应该会在浏览器中看到下面的图像

让我们对项目进行一些更改。在目录中分别创建两个名为components和的新文件夹。在目录中创建一个名为 的新文件夹。在此新文件夹中，创建一个名为 的新文件，将以下代码复制并粘贴到其中，然后保存文件。pagessrccomponentsButtonButton.jsx

function Button() {
  return (
    <button>Random Button</button>
  )
}

export default Button

然后在文件夹中创建一个pages名为 的新文件夹Home。在此新文件夹中，创建一个名为 的新文件Home.jsx，将以下代码复制并粘贴到其中，然后保存该文件。

function Home() {
  return (
    <>
      <h1>This is The HomePage</h1>
    </>
  );
}
export default Home;

下一步是App.jsx用以下代码替换文件中的样板代码：

import "./App.css";
import Home from "./pages/Home";

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;

保存这些更改后，您现在应该可以在浏览器中看到以下内容。

配置项目以使用绝对导入

要将您的应用程序配置为使用绝对导入，您需要对vite.config.js位于项目目录根目录下的文件进行一些更改。

将以下代码添加到vite.config.js文件

resolve: {
    alias: {
      src: "/src",
    },
  },

你vite.config.js现在看起来应该是这样的：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: "/src",
    },
  },
});

保存文件后，开发服务器将重新启动。现在，项目已配置了绝对路径导入，可以使用vite.config.js文件中创建的别名导入任何文件。

Button以下是如何导入我们的应用程序中的组件的示例：

import Button from "src/components/Button/Button"

现在，在开发或构建过程中，每当 vitesrc在我们的导入路径开头看到 时，它都会./src根据 中的配置被解析为vite.config.file。这样，即使代码库不断增长，也能更轻松地找到组件。

配置 VS Code IntelliSense

目前，当您尝试导入Button组件时，VS Code intelliSense 仍会建议使用相对路径的文件路径。

例如，如果您尝试在文件夹中导入Button我们Home页面中的组件pages，VsCode 仍然使用相对导入语法来建议组件的位置。

动图

这是因为我们尚未配置 VsCode 智能感知来识别绝对导入路径。要配置 VS Code 智能感知，您只需jsconfig.json在项目根目录中创建一个名为的新文件，并将以下代码添加到该文件中：

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

保存文件后，VsCode 的智能感知配置将自动更新。现在，Button再次导入组件时，VsCode 智能感知提供的文件路径建议就是绝对导入路径。

动图

读者实用建议

添加此部分是为了突出显示读者提供的有用提示，否则这些提示可能会在评论部分中丢失。

• @divensky 提供的这个技巧，是解决 Typescript 无法识别路径别名问题的好方法

结论

通过遵循本指南中概述的步骤，您已经了解了如何设置 vite React 应用程序、如何配置vite.config.js文件以解析应用程序中的绝对路径、如何使用绝对导入来导入组件以及如何配置 VsCode intellisense 以识别应用程序中的绝对导入路径。