Node.js Express中public文件夹子项目无法正常加载的问题排查

让我们一步步拆解你的问题，然后给出针对性的修复方案：

1. 为什么/FacebookGrabber会报Cannot find module 'html'？ #

你在代码里用了res.render()来返回HTML文件，但res.render()是Express用来渲染模板引擎文件（比如EJS、Pug）的方法，不是直接返回静态HTML的工具。当你调用res.render("FacebookGrabber/index.html")时，Express会默认去找名为html的模板引擎模块，但你并没有安装它，所以就抛出了找不到模块的错误。

修复方案：用res.sendFile()替代res.render() #

对于静态HTML文件，我们应该用res.sendFile()来返回，它能正确定位到文件的绝对路径。修改你的路由代码：

// 根路径
app.get("/", function(req, res){
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

// FacebookGrabber 项目
app.get("/FacebookGrabber", function(req, res){
  res.sendFile(path.join(__dirname, "public", "FacebookGrabber", "index.html"));
});

// FootballScores Angular项目
app.get("/FootballScores", function(req, res){
  res.sendFile(path.join(__dirname, "public", "FootballScores", "index.html"));
});

2. 为什么/FootballScores加载了文件但页面无内容？ #

这大概率是Angular项目的静态资源路径问题：Angular打包后的资源（JS、CSS、图片等）默认是相对于根目录/的，但当你在/FootballScores路径下访问页面时，浏览器会尝试从/FootballScores下去找这些资源，导致资源加载失败，页面自然没有内容。

修复方案： #

方案一：修改Angular项目的base href

在Angular项目的index.html里，把<base href="/">改成<base href="/FootballScores/">，然后重新打包项目，把打包后的文件放到public/FootballScores目录下。

方案二：在Express中配置子目录的静态资源

如果不想修改Angular的配置，可以给FootballScores单独配置静态资源路径，确保它的资源能被正确访问：

// 原有根目录静态资源配置
app.use(express.static(path.join(__dirname, "public")));
// 给FootballScores单独配置静态资源，优先级更高
app.use("/FootballScores", express.static(path.join(__dirname, "public", "FootballScores")));

另外，如果你用了Angular的路由，还需要处理SPA的刷新问题：当用户在/FootballScores/xxx这样的子路由刷新页面时，Express会找不到对应的路由，所以需要添加一个兜底路由，返回Angular的index.html：

// 处理Angular SPA路由，放在所有路由的最后
app.get("/FootballScores/*", function(req, res){
  res.sendFile(path.join(__dirname, "public", "FootballScores", "index.html"));
});

3. 验证你的文件结构 #

确保你的public目录结构是这样的，避免路径错误：

public/
├── index.html          # 根路径的作品集页面
├── FacebookGrabber/
│   └── index.html      # FacebookGrabber项目的页面
└── FootballScores/
    ├── index.html      # Angular项目的入口页面
    ├── js/             # Angular的JS文件
    ├── css/            # Angular的CSS文件
    └── ...             # 其他资源文件

把这些修改完成后，重启你的Express服务器，再访问/FootballScores和/FacebookGrabber应该就能正常显示了。

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