如何在Express中为Parcel打包应用的子文件夹提供静态文件服务

• Parcel默认构建会将src/assets目录下的资源输出到dist/assets路径，你当前的Express配置仅暴露了dist/pages和dist/admin两个目录，dist/assets没有对外提供访问，所有资源请求都会返回404。
• 若页面内使用相对路径引用assets资源，在/admin前缀路径下访问时，相对路径会自动拼接/admin前缀，导致请求路径变为/admin/assets/xxx，和实际资源路径不匹配。

1. 新增assets目录的静态服务规则 #

在Express路由配置中新增一行，单独暴露assets目录，保留原有配置不变即可：

// 新增assets静态服务
app.use("/assets", express.static(path.join(__dirname, "dist", "assets")));
// 原有配置保持不变
app.use(express.static(path.join(__dirname, "dist", "pages")));
app.use("/admin", express.static(path.join(__dirname, "dist", "admin")));

这个方案完全不影响你原来的URL规则，也不会破坏后续/admin路径的权限控制逻辑。

2. 统一资源引用为绝对路径 #

把所有页面、样式文件中引用assets资源的路径改为以/开头的绝对路径，例如将原来的../assets/image.png改为/assets/image.png，确保无论在根路径页面还是/admin路径下的页面，资源请求路径都是统一的。

可选：配置Parcel确保打包路径正确 #

如果修改后仍有路径问题，可以在项目根目录的package.json中添加配置，指定Parcel构建的公共路径为根路径：

{
  "name": "your-project",
  "publicUrl": "/"
}

重新构建后，Parcel会自动将所有资源引用生成为从根路径开始的绝对路径，避免相对路径导致的错误。

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