Astro构建后直接打开HTML样式异常，如何修正资源路径？

问题根源 #

Astro默认生成绝对路径的资源链接（比如/_astro/example.92d61713.css），当直接用本地文件浏览器打开index.html时，这个绝对路径会指向系统根目录，而非当前HTML文件所在的目录，导致样式文件无法被正确加载。需要配置Astro生成相对路径的资源链接。

两种配置方案 #

修改项目根目录的astro.config.mjs（若为CommonJS格式则是.cjs），任选一种配置即可：

方案1：设置site为空字符串 #

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  site: '', // 空字符串会让Astro自动生成相对路径的资源引用
  integrations: [tailwind()],
});

方案2：指定build的assetsPrefix为相对路径 #

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  build: {
    assetsPrefix: './', // 强制所有资源链接加上相对路径前缀
  },
  integrations: [tailwind()],
});

验证效果 #

修改配置后重新执行npm run build，打开构建后的index.html查看样式表链接，会发现已经变为./_astro/example.92d61713.css，此时直接本地打开文件，样式即可正常显示。

内容的提问来源于stack exchange，提问作者flowerflower