Vite 中的路徑別名允許我們在匯入模組時使用專案目錄的自訂路徑。
假設我們正在開發一個 React 項目，在我們的卡片元件中，我們想要匯入三個不同的元件來建立我們的卡片。比如說按鈕、標題、圖像。
import Button from '../../components/Button' import Header from '../../components/ui/Header' import Image from '../../components/Image'
目前看起來不錯，但想想當我們想要重構或改進我們的元件並且必須導入大約 5 或 6 個以上元件時。然後就開始變得混亂。
import Button from '../../components/Button' import Header from '../../components/ui/Header' import Image from '../../components/Image' import Panel from "../../components/Dashboard/Panel"; import Input from "../../components/Forms/Input"; import Submit from "../../components/Forms/Submit"
這就是路徑導入變得有用的地方，它們使我們的導入語句更清晰、更易於管理。使用路徑別名，我們上面的內容就變成了
import Button from '@/src/components/Button' import Header from '@/src/components/ui/Header' import Image from '@/src/components/Image'
對於那些不使用自動導入的人，您不需要記住目錄與您正在處理的元件有多遠。當您需要移動檔案或重構專案結構時，它只是簡化了程式碼組織，您無需更新程式碼庫中的大量相對導入路徑
首先需要安裝React + Vite
pnpm create vite setup-path-alias --template react
接下來，您將進入剛剛建立的專案目錄然後執行
cd setup-path-alias pnpm install pnpm run dev
注意：我使用快捷方式使用模板創建Vite應用程序，您可以使用任何您喜歡的其他方法。所以只要你創建應用程式。我也使用了 pnpm，但你可以使用你喜歡的套件管理器（npm、yarn、bun...）。
完成後，Vite專案目錄如下
├── 公
├── src/
│ └── 組件/
│ └──HelloWorld.jsx
├── .gitignore
├──index.html
├── package.json
├── README.md
└── vite.config.js
現在轉到 vite.config.js 文件，這是文件預設的樣子
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
接下來，我們將安裝 Path 模組，我們用它來使用 path.resolve() 方法，這有助於建立絕對路徑。
pnpm 我的路徑
然後我們將解析 vite.config.js 檔案中的路徑別名，結果應該如下所示
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
}
},
});
為了確保 VS Code 識別您的別名，請在專案根目錄中建立或更新 jsconfig.json：
{
"compilerOptions": {
"paths": {
"@/*": [
"./src/*"
]
}
}
}
然後我們可以更新我們的導入
import Button from '../../components/Button' //to this import Button from '@/src/components/Button'
請注意，我們可以像這樣建立路徑別名，並解析任意數量的路徑，然後更新我們的智慧感知。我留下了自己的更簡單的東西，因為我的項目很小，默認情況下，src文件夾包含所有項目文件，然後我可以將其指向src，但是當您在代碼中多次使用組件文件夾時，您可以新增它路徑別名以保持匯入乾淨。再次建議避免過度使用別名：因為雖然它們可以簡化導入，但過度使用它們會使您的程式碼對於新團隊成員來說不太直觀。對常用、經常被存取的目錄使用別名。
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
},
感謝您的閱讀
以上是如何設定路徑別名 Vite + React的詳細內容。更多資訊請關注PHP中文網其他相關文章！
