Node.js+Express.js单页应用无法加载所需JS文件求助

问题描述 #

在Node.js+Express.js环境运行单页应用时，仅能成功加载home.html文件，无法加载必需的countrymap.js和mapdata.js两个JavaScript文件，调整JS文件存放位置后问题仍未解决。

项目结构 #

根目录
├── public/
│   ├── home.html
│   ├── countrymap.js
│   └── mapdata.js
├── src/
│   ├── weather.js
│   └── controller.js
└── server.js

相关代码 #

weather.js #

const { Router } = require("express");
const controller = require("./controller");
const path = require("path");

const router = new Router();

router.get("/home", (req, res) => {
  res.sendFile(path.join(__dirname, "public", "home.html"));
});

router.post(
  "/district/",
  [controller.auther, controller.admin],
  controller.addDistrict
);
router.post(
  "/data/",
  [controller.auther, controller.editor],
  controller.addData
);
router.get("/", [controller.auther, controller.viewer], controller.getData);
router.post("/auth", controller.auth);

module.exports = router;

server.js #

const express = require("express");
const weatherRoutes = require("./src/weather");
const path = require("path");

const app = express();
const port = 3000;

app.use(express.json());

app.use(express.static(path.join(__dirname, "public")));

app.use("/api/weather", weatherRoutes);

app.listen(port, () => console.log(`App listening on port ${port}`));

home.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="countrymap.js"></script>
    <script type="text/javascript" src="mapdata.js"></script>
  </body>
</html>

问题根源 #

当通过/api/weather/home访问home.html时，页面中JS文件的相对路径会被浏览器解析为/api/weather/countrymap.js和/api/weather/mapdata.js，但静态文件是挂载在根目录（/）下的public文件夹，因此这些路径无法找到对应文件，返回404错误。

解决方案 #

方法1：修改HTML中的JS引用为绝对路径（推荐） #

将home.html中的脚本引用改为绝对路径，确保浏览器从根目录请求静态文件：

<script type="text/javascript" src="/countrymap.js"></script>
<script type="text/javascript" src="/mapdata.js"></script>

方法2：调整路由与静态文件挂载路径（可选） #

如果希望保留相对路径，可以修改路由配置：

1. 在weather.js中将/home路由改为根路径：

router.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "public", "home.html"));
});

2. 在server.js中调整静态文件挂载路径，使其与路由前缀匹配：

app.use("/api/weather", express.static(path.join(__dirname, "public")));

此时访问/api/weather即可加载页面，相对路径会正确指向静态文件。

内容的提问来源于stack exchange，提问作者Nevanjith De Silva