介绍

在进行Vite React TypeScript项目时，您可能在尝试设置并使用绝对路径导入时遇到困难。在本文中，我们将解决面临的共同挑战，并提供可能的解决方案来帮助您克服这一斗争

了解问题

尝试使用绝对路径而不是相对路径导入模块时，问题通常会出现。绝对路径为导入文件提供了一种更清洁，更直观的方式，从而使项目结构更易于管理。但是，设置和配置在Vite React TypeScript项目中的绝对路径导入需要一些其他步骤。

快速简便的设置：使用React和Typescript构建Vite项目

打开命令行界面（CLI）并导航到要创建Vite Project的目录。
运行以下命令，使用React-TS模板创建一个新的Vite项目：

npx create-vite my-vite-app --template react-ts

项目创建完成后，请导航到项目目录：

cd my-vite-app

通过运行：
安装项目依赖项

npm install

启动开发服务器：

npm run dev

在我的Vite React TypeScript项目中设置了绝对路径导入的必要配置后，包括我的tsconfig.json中的以下配置：

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"]
    },

随后将以下代码添加到注册组件中的组件目录;

const SignUp = () => {
  return <div className="signup-container">This is a signup page!!</div>;
};

export default SignUp;

我试图在 app.tsx 文件中导入注册组件。但是，我遇到了一个绝对路径导入无法正常工作的问题。

import SignUp from "components/SignUp/SignUp";

转到 app.tsx 组件并添加以下;

import SignUp from "components/SignUp/SignUp";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <SignUp />
    </div>
  );
};

export default App;

我有这个错误;

如果我使用相对路径，则该应用在DEV＆BUILD模式下工作而没有任何错误：

import SignUp from "./components/SignUp/SignUp";

如何使绝对路径在Vite反应打字条项目中起作用？

这是一些解决方案，可以帮助您获得在Vite React typeScript项目中使用的绝对路径进口：

在tsconfig.json文件中，我们为绝对导入定义了必要的编译器选项和路径别名。将“ baseurl”选项设置为“ ./src”之后，以指定解决模块路径的基本目录。

为了支持tsconfig.json文件中定义的路径别名，您需要更改vite.config.ts文件。您应该更新vite.config.ts中的别名配置，以与tsconfig.json中定义的别名保持一致。

更新 vite.config.ts 用此代码;

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      components: "/src/components",
      layouts: "/src/layouts",
      pages: "/src/pages",
    },
  },
});

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

import SignUp from "components/SignUp/SignUp";
import Header from "layouts/Header/Header";

要使用 @符号来实现导入语句，您可以在vite.config.ts文件中修改别名配置，如下所示：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@components": "/src/components",
      "@layouts": "/src/layouts",
      "@pages": "/src/pages",
    },
  },
});

设置了绝对导入后，您可以在项目中开始使用它们。这是如何使用绝对导入导入组件的示例：

import SignUp from "@components/SignUp/SignUp";

跟我来