Express.js如何配置路由实现非静态文件请求全部指向index.html

正确配置方案 #

核心改动点 #

1. 补全缺失的path模块引入：原代码中使用了path.join但未引入该模块，会直接抛出运行时错误
2. 修正静态资源路由的匹配规则：express.static不需要在路径前缀后加/*，仅指定前缀即可自动匹配该目录下的所有子资源
3. 严格按照「高优先级路由在前，低优先级通配路由在后」的顺序排列：静态资源路由全部放在最前面，最后再配置*通配路由返回index.html

完整可用代码 #

const express = require("express");
const path = require("path"); // 补全path模块引入

const app = express();
const port = process.env.PORT || 3000;

// 静态资源路由放在最前面，优先级最高
app.use("/scripts", express.static(path.join(__dirname, "scripts")));
app.use("/styles", express.static(path.join(__dirname, "styles")));
app.use("/views", express.static(path.join(__dirname, "views")));

// 所有未命中上面路由的请求，统一返回index.html
app.get("*", function (request, response) {
    response.sendFile(path.join(__dirname, "/index.html"));
});

app.listen(port, function () {
    console.log("Server is running, port: " + port);
});

效果验证 #

该配置完全符合你预期的路由行为：

• 请求/scripts/index.js / styles/main.css / views/app.html等静态资源时，会匹配对应前缀的静态路由，直接返回对应文件
• 其余任意路径请求（包括根路径/、多级路径/a/b/c等）都会命中最后的通配路由，返回index.html，交由前端JS处理路由逻辑

额外优化建议（适配Heroku免费额度） #

可以给静态资源添加长期缓存头，减少重复请求的服务端开销：

// 给静态资源添加1年缓存，适合不会频繁变更的静态资源
app.use("/scripts", express.static(path.join(__dirname, "scripts"), { maxAge: "1y" }));
app.use("/styles", express.static(path.join(__dirname, "styles"), { maxAge: "1y" }));
app.use("/views", express.static(path.join(__dirname, "views"), { maxAge: "1y" }));

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