Astro项目中public文件夹内文件的路径解析问题

问题原因 #

本地开发时，../public/data.json能生效是因为开发服务器保留了原文件夹结构，但执行npm run build后，public目录下的文件会被直接复制到构建产物（默认是dist）的根目录，原public目录结构不会保留，导致相对路径失效。

两种解决方案 #

1. 静态导入JSON内容（适用于在组件中直接读取数据） #

在src/index.astro中直接导入JSON文件，Astro会在构建时自动处理路径：

---
// 在组件脚本区导入JSON
import data from '../public/data.json' assert { type: 'json' };
---

<!-- 在模板中使用数据 -->
<div>{data.someKey}</div>

这种方式会把JSON内容直接打包到组件中，不需要在前端发起请求，dev和build环境都能正常工作。

2. 前端动态请求（适用于需要在浏览器中异步加载数据） #

因为public目录的文件最终会部署在站点根目录，所以直接使用根路径请求即可：

---
---
<script>
// 在浏览器端发起请求
async function loadData() {
  const res = await fetch('/data.json');
  const data = await res.json();
  console.log(data);
}
loadData();
</script>

/data.json这个路径在开发环境和构建后的生产环境都指向正确的文件位置。

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