Vite React 项目绝对路径配置

2025/4/27 7:14:29 来源：https://blog.csdn.net/autumnforest290/article/details/143190113 浏览: 次关键词：Vite React 项目绝对路径配置

原文: https://www.qiulin-dev.top/articles/2655fcfe-6456-4a66-928a-4b8d20aeb8d2

在 Vite 项目中，配置绝对路径可以让我们在导入模块时不再依赖相对路径 …/…/，而是通过简洁的别名来引用项目中的模块。接下来我们将详细介绍如何在 Vite 和 React 项目中配置绝对路径，并结合 TypeScript 的配置。

1. 配置 `vite.config.ts`

Vite 默认支持通过 alias 来配置路径别名。我们需要在 vite.config.ts 中添加相关的别名配置。以下是示例：

// vite.config.ts
import { defineConfig } from 'vite'; 
import react from '@vitejs/plugin-react';
import { resolve } from 'path';export default defineConfig({plugins: [react()],resolve: {alias: {'@': resolve(__dirname, 'src'), // 将 @ 指向 src 目录},},
});

这里，我们使用了 Node.js 的 path.resolve 方法将 @别名指向项目的 src 目录。配置完成后，我们就可以在项目中通过 @ 来引用 src 目录下的文件。

path报错，需要安装 @types/node

npm install --save-dev @types/node

2. 配置 TypeScript 路径别名

为了让 TypeScript 也识别我们设置的别名，我们需要在 tsconfig.json 中同步配置。添加以下配置：

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

baseUrl 指定了相对路径的根目录为项目的根目录，paths 则是配置别名的映射关系。

3. 示例用法

现在我们可以使用 @ 来代替 src 目录。例如，假设项目中有以下文件结构：

src
│   main.tsx
└───components│   Hello.tsx

在 main.tsx 中导入 Hello 组件时，可以这样编写：

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@/components/Hello'; // 使用绝对路径别名ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<React.StrictMode><App /></React.StrictMode>
);