Astro 系列文第二十三日：路徑別名

前言

在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護，可以透過額外設置路徑別名來解決這個問題。

為什麼需要路徑別名（Aliases）

當網站規模愈複雜，使用相對關係路徑就會需要花費很多心力去解讀與撰寫，舉例來說在 src/pages/about/company.astro 檔案中需要引入在 src/components/global/ 內的 Button.astro 元件在撰寫路徑時就需要理解兩個檔案之間的關係，並且當其中有任何一方移動時路徑就需要修改。

---
<!-- 又長又難寫！ -->
import Button from '../../components/global/Button.astro'
---

解決辦法

可以設定專案的「路徑別名」在 tsconfig.json 或 jsconfig.json 中：

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

這樣只需要在路徑上使用別名即可，不用考慮檔案之間的路徑關係：

---
import Button from '@components/global/Button.astro
---

總結

實際上 Astro 的路徑別名設定上與 Vite 一模一樣。

延伸閱讀

• Aliases - Astro DOCS🔗
• Day23 - 路徑別名🔗 - 相同文章同步發布於 iThome 鐵人賽中