Node.js Express应用无法识别JS文件src路径问题求助

我正在开发一款基于Express和MongoDB的简易测验应用，在hbs模板文件（quiz.hbs）中尝试通过src引用quiz.js文件时，尽管路径看似正确，且已尝试调整文件位置、更换多种路径写法，仍无法成功加载该JS文件。但将JS代码直接嵌入HTML时可正常运行。

相关代码示例 #

Index.js 文件 #

const express = require("express");
const app = express();
const path = require("path");
const hbs = require("hbs"); // 处理hbs模板
const collection = require("./mongodb");

const tempelatePath = path.join(__dirname, "./templates");

app.use(express.json()); // 解析JSON请求体
app.set("view engine", "hbs"); // 设置视图引擎为hbs
app.set("views", tempelatePath); // 指定模板文件目录
app.use(express.urlencoded({ extended: false })); // 解析URL编码的请求体
app.use(express.static(path.join(__dirname, 'public'))); // 托管静态资源文件

// 路由定义
app.get("/", (req, res) => {
    res.render("login");
  });
  
app.get("/signup", (req, res) => {
  res.render("signup");
});

app.get("/quiz", (req, res) => {
  res.render("quiz");
});

app.get("/quizTwo", (req, res) => {
res.render("quizTwo");
});

app.get("/quizThree", (req, res) => {
  res.render("quizThree");
  });

// 用户注册接口
app.post("/signup", async (req, res) => {
  const data = {
    name: req.body.name,
    password: req.body.password,
  };

  try {
    await collection.create(data);
    res.render("home");
  } catch (error) {
    console.error("Error inserting data:", error);
    res.status(500).send("Error inserting data");
  }
});

// 用户登录接口
app.post("/login", async (req, res) => {
  try {
    const check = await collection.findOne({ name: req.body.name }); // 检查用户是否存在

    if (check.password === req.body.password) {
      res.render("home");
    } else {
      res.send("Password is incorrect");
    }
  } catch {
    res.send("No Account found");
  }
});

app.listen(3000, () => {
  console.log("Connection made");
});

MongoDB 文件（mongodb.js） #

const mongoose = require("mongoose")

const connectionOptions = {
  useNewUrlParser: true,
  useUnifiedTopology: true,
}

mongoose.connect("mongodb://127.0.0.1:27017/ChooseAdventure", connectionOptions) // 建立MongoDB连接

const db = mongoose.connection

db.on("error", console.error.bind(console, "Error connecting to MongoDB:"))
db.once("open", () => {
  console.log("Connected to MongoDB!")
})

// 用户登录数据模型
const LogInSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
})

const collection = mongoose.model("CollectionOne", LogInSchema)

module.exports = collection

quiz.hbs 文件 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Haunted Adventure Quiz</title>
  </head>
  <body>
    <div id="quiz-container">
      <!-- 测验题目和选项将插入到这里 -->
    </div>
    <button onclick="displayQuiz()">Start Quiz</button>

    <script src="../quiz.js"></script>

  </body>
</html>

问题原因及解决方案 #

核心问题 #

你的Express应用已经通过app.use(express.static(path.join(__dirname, 'public')))将public目录设为静态资源托管目录，但当前quiz.js要么没放在public目录下，要么引用路径不符合静态资源的访问规则。

浏览器加载前端资源时，是从服务器根路径（/）解析，而非相对于模板文件的物理路径。../quiz.js这种相对模板文件的路径无效，因为模板是服务器渲染后返回给浏览器的，浏览器无法识别服务器端的文件结构。

解决步骤 #

1. 调整文件位置：将quiz.js移动到项目根目录的public文件夹中（没有则新建）。
2. 修改引用路径：在quiz.hbs中把JS引用改为：

<script src="/quiz.js"></script>

public是静态资源根目录，/quiz.js会直接指向public/quiz.js。

验证方式 #

启动服务器后，直接访问http://localhost:3000/quiz.js，如果能看到JS文件内容，说明静态资源配置正确，此时访问/quiz页面就能正常加载JS文件。

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