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 中添加相关的别名配置。以下是示例:

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.jspath.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 项目,按照该流程即可轻松实现绝对路径的配置。

相关推荐
csdn_aspnet14 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel37 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
奋飛2 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter2 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心2 小时前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试