Express搭建站点跳转回首页index.html出现404错误原因排查

问题排查与解决办法 #

核心原因 #

• 你的Express服务仅配置了根路由/返回index.html，没有注册/index.html对应的路由规则，也未将index.html放入对外开放的静态资源目录，因此直接请求/index.html会返回404
• 前端跳转用的../index.html是本地文件系统的相对路径逻辑，Web服务的路由规则和本地文件目录结构没有强制对应关系，该路径规则不适用

具体修复步骤 #

1. 修改跳转链接（最快生效）
   将about页面中「Me」按钮的跳转代码直接改成指向根路由即可：

<li><a href="/">Me</a></li>

2. 若需要保留/index.html路径的访问能力，二选一执行即可：

• 方案1：将index.html移入你已配置的public静态资源目录，同时删除原有app.get("/", ...)的自定义路由，Express静态中间件会自动返回目录下的index.html作为根路径响应
• 方案2：在index.js中新增/index.html路由规则：

app.get("/index.html", function (req, res) {
  res.sendFile(__dirname + '/index.html');
})

3. 额外注意事项

• 你的about页面引用了服务端代码./index.js，属于无效引用，直接删除该行<script>标签即可
• 若style.css、particles.min.js等资源存放在static目录下，前端引用路径需要统一加上/static/前缀，示例：

<link rel="stylesheet" type="text/css" href="/static/style.css">
<script type="text/javascript" src="/static/particles.min.js"></script>

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