如何阻止Express静态服务默认返回index.html？Angular5部署求助

这个问题的核心原因是 express.static 中间件会自动匹配请求路径下存在的index.html文件：当你访问根路径/时，dist目录里的index.html是存在的，所以静态服务直接返回了这个文件，不会触发后面的app.get('*')路由；而访问/something时，dist目录下没有对应的文件或目录，静态服务匹配失败，才会走到你的通配符路由里。

下面给你两种简单有效的解决方法：

方法一：禁用静态服务的自动index匹配 #

直接修改express.static的配置，关闭它自动返回index.html的行为，这样所有路径（包括根路径）都会先经过静态服务匹配静态资源（比如js、css、图片等），匹配失败后就会走到你的通配符路由。

修改后的代码：

// 禁用静态服务的index自动匹配，访问/时不会直接返回index.html
app.use(express.static(path.join(__dirname, 'dist'), { index: false }));
app.use("/api", routes);
app.get('*', function(req, res) {
    console.log("i was served");
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

这样调整后：

• 静态资源（比如/main.js、/styles.css）依然能被express.static正常返回
• 所有路由请求（包括/和/something）都会走到你的app.get('*')里，完美适配Angular的路由机制

方法二：单独处理根路径请求 #

如果你不想修改静态服务的全局配置，可以在express.static之前单独添加根路径的路由处理，让根路径直接走你的自定义逻辑：

// 先处理根路径请求
app.get('/', function(req, res) {
    console.log("i was served");
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});
app.use(express.static(path.join(__dirname, 'dist')));
app.use("/api", routes);
app.get('*', function(req, res) {
    console.log("i was served");
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

这种方式也能解决问题，但相比方法一，需要多写一段重复的代码，所以更推荐方法一。

内容的提问来源于stack exchange，提问作者O-mkar