使用Express Router发送静态文件时遇/about路由404问题求助

这问题我之前调试路由的时候也踩过坑！核心原因是**res.sendFile()使用相对路径时，是基于Node.js进程的启动目录，而不是你写路由文件的那个目录**。比如你启动项目的命令是在项目根目录执行node app.js，那相对路径就会从根目录开始找，而如果你的about.html放在public文件夹里，直接写"about.html"自然找不到，就会返回404。

下面给你几个靠谱的解决方案：

方案1：用__dirname拼接绝对路径 #

__dirname会返回当前路由文件所在的绝对路径，我们可以用Node的path模块把它和静态文件的相对路径拼接成完整绝对路径，这样就不会出错了。

首先在路由文件顶部引入path模块：

const path = require('path');

然后修改你的路由代码：

router.get('/', function(req, res, next) {
  // 假设你的index.html在项目根目录下的public文件夹里
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

router.get('/about', function(req, res, next) {
  res.sendFile(path.join(__dirname, '../public/about.html'));
});

这里的../public需要根据你实际的文件结构调整，如果路由文件在routes文件夹，静态文件在根目录的public，就用../public；如果路由文件和public同级，就直接写./public。

方案2：设置sendFile的root选项 #

你也可以通过root参数指定静态文件的根目录，这样sendFile就会从这个根目录里找文件，不用每次都拼路径：

const path = require('path');
const staticRoot = path.join(__dirname, '../public');

router.get('/', function(req, res, next) {
  res.sendFile('index.html', { root: staticRoot });
});

router.get('/about', function(req, res, next) {
  res.sendFile('about.html', { root: staticRoot });
});

方案3：提前配置Express静态文件服务（更推荐） #

其实如果你的HTML文件都是静态资源，更推荐先在主app文件里配置静态文件中间件，这样可以直接通过URL访问静态文件，也能配合路由使用：

在app.js里添加：

const express = require('express');
const app = express();
// 配置静态文件目录，这里public是你的静态文件存放目录
app.use(express.static('public'));

之后你的路由可以简化成：

router.get('/', function(req, res, next) {
  res.sendFile('index.html', { root: 'public' });
});

router.get('/about', function(req, res, next) {
  res.sendFile('about.html', { root: 'public' });
});

甚至如果你的路由路径和文件名完全对应，比如/about对应about.html，其实可以不用写路由，直接访问localhost:3000/about.html就能打开，但如果想隐藏.html后缀，还是需要路由来处理。

记得先确认你的文件结构是否正确，比如about.html确实在你指定的public文件夹里，别放错位置哦！

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