Question

别名可以用于创建简洁的导入。

别名有助于改善在项目中大量使用绝对或相对引用的体验。

src/pages/about/company.astro

---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---

在这个示例中，开发者需要理解 src/pages/about/company.astro, src/components/controls/Button.astro 和 src/assets/logo.png 间的关系。如果移动了 company.astro 文件，那么这些导入也都需要更新。

你可以在 tsconfig.json 或 jsconfig.json 中添加导入别名。

tsconfig.json

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

注意

确保 compilerOptions.baseUrl 已设置，以便可以解析别名路径。

在这个配置更改完之后，开发服务器会自动重启。然后，你可以在项目中的任何地方使用这些别名进行导入：

src/pages/about/company.astro

---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---

VS Code 或其他编辑器会自动集成这些别名。