告別 React 中丑陋的導入路徑，借助 Vite 的魔法

作者：前端小智 2025-08-29 00:00:05

Vite 的別名配置能把“拉扯型”導入路徑，變成整潔、可維護的工程風格。越早鋪好、越省事：先從 @ + 常用目錄開始，后續再按功能域或環境做細化。

冗長的相對路徑，是 React 項目里悄無聲息的效率殺手。剛入坑那會兒，我也常被一屏 ../../.. 淹沒。今天一起用 Vite 的幾個小技巧，把導入路徑洗干凈、把代碼庫理清爽。

什么是 Vite Alias？

把 Alias（別名）當成路徑快捷方式就好。它能把凌亂的相對導入：

import Button from '../../../components/Button';

變成干凈的一行：

import Button from '@components/Button';

路徑更短、可讀性更強，尤其適合中大型 React 代碼庫。

起步：在 vite.config.ts 里配置

在 Vite 里，別名配置寫在 resolve.alias：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

從此：

import { Button } from '@/components/Button';

再也不用 ../../components/Button 了。

React + TypeScript 的“常用別名清單”

假設你的 src 結構清晰，可以給常用目錄各配一個別名：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@/components': path.resolve(__dirname, './src/components'),
      '@/hooks': path.resolve(__dirname, './src/hooks'),
      '@/utils': path.resolve(__dirname, './src/utils'),
      '@/lib': path.resolve(__dirname, './src/lib'),
      '@/assets': path.resolve(__dirname, './src/assets'),
      '@/styles': path.resolve(__dirname, './src/styles'),
      '@/types': path.resolve(__dirname, './src/types'),
    },
  },
});

配好后，你就能這樣寫：

import { Button } from '@/components/ui/Button';
import { useAuth } from '@/hooks/useAuth';
import { apiClient } from '@/lib/apiClient';
import { formatDate } from '@/utils/formatDate';

TypeScript 同步：補上 tsconfig.json

別名不僅要在 Vite 生效，編輯器/TS 也得認識它，這樣自動補全與類型檢查才不會迷路：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@/hooks/*": ["src/hooks/*"],
      "@/utils/*": ["src/utils/*"],
      "@/lib/*": ["src/lib/*"],
      "@/assets/*": ["src/assets/*"],
      "@/styles/*": ["src/styles/*"],
      "@/types/*": ["src/types/*"]
    }
  }
}

小貼士：確保 Vite 配置與 tsconfig paths 保持一致，避免“能跑但 IDE 報紅”的錯覺。

進階套路：兩種常見場景

1）按“功能域”組織的項目

如果你的代碼以 feature 劃分，直接給每個功能域一個別名：

alias: {
  '@': path.resolve(__dirname, './src'),
  '@/auth': path.resolve(__dirname, './src/features/auth'),
  '@/dashboard': path.resolve(__dirname, './src/features/dashboard'),
  '@/profile': path.resolve(__dirname, './src/features/profile'),
  '@/shared': path.resolve(__dirname, './src/shared'),
}

2）基于環境的動態別名

有些配置會因環境不同而切換路徑，配成動態別名更順手：

alias: {
  '@': path.resolve(__dirname, './src'),
  '@/config': path.resolve(__dirname, `./src/config/${process.env.NODE_ENV}`),
}

使用別名的幾條最佳實踐

短而有義：別名越簡潔、含義越明確越好
命名統一：推薦統一使用 @ 前綴（如 @/components）
寫進 README：把別名約定寫清楚，團隊協作不踩坑
兩端都測：開發與生產都跑一遍，盡早發現路徑問題

收尾

Vite 的別名配置能把“拉扯型”導入路徑，變成整潔、可維護的工程風格。越早鋪好、越省事：先從 @ + 常用目錄開始，后續再按功能域或環境做細化。

下次寫 React，不妨先給項目加上這些別名，讓你的代碼庫從第一行 import 開始就好看。

責任編輯：武曉燕來源：大遷世界