Node.js Express带:id路由下edit.ejs无法加载CSS问题求助

在Node.js+Express项目中，edit.ejs视图在/update/:id（带参数）路由下无法加载CSS文件，但在/update/（无参数）路由下可正常加载。日志显示：

• 带参数时，CSS请求路径为/update/stylesheets/style.css，返回404
• 无参数时，CSS请求路径为/stylesheets/style.css，返回304

原因分析 #

问题出在相对路径的解析逻辑：当访问/update/123这类层级路由时，浏览器会把stylesheets/style.css视为当前路由的相对路径，自动拼接成/update/stylesheets/style.css，但你的静态资源是挂载在网站根目录下的，所以找不到对应文件。

解决方案 #

方法1：改用绝对路径引用静态资源 #

直接把CSS的href改成以/开头的绝对路径，确保无论当前路由层级，都从网站根目录查找静态文件：

<link rel="stylesheet" href="/stylesheets/style.css" />

同时注意页面中其他相对路径的链接（如导航、侧边栏链接），也建议改成绝对路径，避免出现同样的路径问题。

方法2：确保静态资源目录正确挂载 #

先确认项目主文件中已经正确配置了express.static，将静态资源目录挂载到根路径：

const express = require('express');
const path = require('path');
const app = express();

// 假设静态文件放在项目根目录的public文件夹下
app.use(express.static(path.join(__dirname, 'public')));

// 你的路由配置
app.use("/update", editRouter);

注：stylesheets文件夹需要放在public目录下，这样/stylesheets/style.css才能被正确访问。

方法3：使用<base>标签指定基准URL #

在edit.ejs的<head>中添加<base>标签，设定页面所有相对路径的基准URL为根目录：

<head>
  <base href="/" />
  <meta charset="utf-8" />
  <title>Update Parcel</title>
  <link rel="stylesheet" href="stylesheets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

修改后的代码示例 #

edit.ejs（方法1优化后） #

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Update Parcel</title>
    <!-- 改为绝对路径引用CSS -->
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <header>
      <nav>
        <label class="logo">ParcelHero</label>
        <ul>
          <!-- 导航链接改为绝对路径 -->
          <li><a href="/menu">Home</a></li>
          <li><a href="/">Log out</a></li>
        </ul>
      </nav>
    </header>
    <div class="hero3">
      <div class="form-box">
        <div class="fontbox">
          <center><h1>Edit</h1></center>
          <center><h1>Parcel</h1></center>
        </div>
        <form action="/update/editPost" method="post" id="login" class="input-group">
          <input type="text" name="tracking_number" class="input-field" placeholder="Enter new Tracking number" required />
          <input type="text" name="owner_name" class="input-field" placeholder="Enter new parcel owner name" required />
          <input type="text" name="owner_phoneNumb" class="input-field" placeholder="Enter new parcel owner no. phone" required />
          <input type="text" name="parcelCourier" class="input-field" placeholder="Enter new parcel courier name" required />
          <input type="radio" name="status" value="Active" checked />Active
          <input type="radio" name="status" value="Inactive" />Inactive
          <button type="submit" class="submit-btn">Save</button>
        </form>
      </div>
    </div>
    <div class="sidebar">
      <h1>Menu</h1>
      <!-- 侧边栏链接改为绝对路径 -->
      <a href="/view">View all parcel</a>
      <a href="/search">Search parcel</a>
    </div>
  </body>
</html>

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