原文: https://www.qiulin-dev.top/articles/2655fcfe-6456-4a66-928a-4b8d20aeb8d2
在 Vite 项目中,配置绝对路径可以让我们在导入模块时不再依赖相对路径 .../.../,而是通过简洁的别名来引用项目中的模块。接下来我们将详细介绍如何在 Vite 和 React 项目中配置绝对路径,并结合 TypeScript 的配置。
1. 配置 vite.config.ts
Vite 默认支持通过 alias 来配置路径别名。我们需要在 vite.config.ts 中添加相关的别名配置。以下是示例:
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
shell
npm install --save-dev @types/node
2. 配置 TypeScript 路径别名
为了让 TypeScript 也识别我们设置的别名,我们需要在 tsconfig.json 中同步配置。添加以下配置:
json
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
baseUrl
指定了相对路径的根目录为项目的根目录,paths
则是配置别名的映射关系。
3. 示例用法
现在我们可以使用 @
来代替 src
目录。例如,假设项目中有以下文件结构:
shell
src
│ main.tsx
└───components
│ Hello.tsx
在 main.tsx
中导入 Hello
组件时,可以这样编写:
ts
// 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>
);
4. 结论
通过在 Vite 和 TypeScript 中配置路径别名,我们可以简化模块的导入路径,使代码更易于维护。以上步骤适用于大多数 Vite + React + TypeScript 项目,按照该流程即可轻松实现绝对路径的配置。