Day23 - Astro Series: Aliases

Astro 系列文第二十三日：路径别名

@ 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 一模一样。

延伸阅读