如何在Heroku静态网页HTML托管环境中正确加载元素？

安全阿岳

2026-5-22

嘿，我来帮你搞定Heroku上的Bootstrap静态站点部署问题！你遇到的元素加载失败，大概率是路径配置或者buildpack选择的问题，我给你分几种情况来解决：

一、先排查最常见的路径问题

本地运行正常但部署后资源加载失败，90%是资源引用路径不对：

检查你所有CSS、JS、图片的src/href属性，尽量用相对路径（比如./css/clean-blog.css或者css/clean-blog.css），不要用绝对路径（比如/css/clean-blog.css，除非你确定Heroku的域名根路径和本地完全一致）。
确认项目目录结构和本地完全匹配，比如css/、js/、img/这些文件夹都在项目根目录，而且没有被.gitignore排除（别不小心把静态资源文件夹忽略了，导致没推送到Heroku）。

二、如果你想继续用PHP buildpack（已创建index.php和composer.json）

既然你已经尝试了PHP方式，那可以调整配置让它正确托管静态资源：

简化composer.json：不需要复杂依赖，只要让Heroku识别这是PHP应用就行，内容改成：
```
{
  "require": {}
}
```

调整index.php：把它改成直接加载你的静态index.html，代码如下：

<?php
  // 直接包含静态HTML文件，确保路径和项目结构匹配
  include_once('index.html');
?>

确认目录结构：你的项目根目录应该是这样的（确保静态资源和index.html同级）：

你的项目/
├── index.php
├── composer.json
├── index.html
├── css/
│   └── clean-blog.css
├── js/
│   └── clean-blog.js
└── img/
    └── 你的图片文件

三、更省心的方案：用Heroku官方静态站点Buildpack

其实你的项目是纯静态前端，没必要用PHP buildpack，专门的静态buildpack更适配：

先删除之前的index.php和composer.json（如果不需要的话）。
在项目根目录创建static.json文件，内容如下（配置nginx来托管静态文件）：
```
{
  "root": ".",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}
```
设置Heroku的buildpack为官方静态站点buildpack：
```
heroku buildpacks:set heroku/static
```
正常执行git add .、git commit -m "Switch to static buildpack"、git push heroku main，部署完成后你的站点应该和本地完全一致。

四、排查具体错误

如果还是有问题，打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面：

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