Express静态文件服务异常：特定端点无法加载静态资源

问题现象 #

• 访问localhost:5500/时，静态文件（CSS、JS）正常加载，样式和脚本功能生效
• 访问http://localhost:5500/users等非根路径端点时，静态文件加载失败、CSS失效，控制台/网络面板无报错，元素面板看不到脚本添加的类
• 尝试为/users单独配置express.static，虽能加载静态文件，但导致后续业务端点功能失效
• HTML中尝试过两种资源路径写法：

  <link rel="stylesheet" href="/css/style.css" type="text/css">
  <script src="./js/bundle.js"></script> 
  

核心原因 #

1. 相对路径解析错误：当在/users页面使用./js/bundle.js这类相对路径时，浏览器会将其解析为/users/js/bundle.js，而你的Express静态文件服务挂载在根路径/下，服务器无法匹配这个路径的资源
2. 非根路径路由未返回正确页面：你的server.js中仅为/路由配置了返回index.html，如果/users等端点未返回包含正确资源引用的HTML文件，也会导致资源加载异常

解决方案 #

1. 统一使用绝对路径引用静态资源 #

将HTML中所有静态资源的引用改为以/开头的绝对路径，确保无论当前页面在哪个路由下，浏览器都会从根目录请求资源：

<link rel="stylesheet" href="/css/style.css" type="text/css">
<script src="/js/bundle.js"></script> 

2. 为所有页面路由返回正确的HTML文件 #

如果/users等端点是用于渲染页面的路由，需要像根路由一样返回index.html（或对应页面文件）：

// 示例：单独配置/users路由返回页面
app.get('/users', (req, res) => {
  res.sendFile(path.join(__dirname, '..', '..', 'public', 'index.html'));
});

// 如果是单页应用（SPA），可以用通配符路由统一处理所有非API请求
// 注意：此路由必须放在所有API路由的后面，避免覆盖API接口
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', '..', 'public', 'index.html'));
});

3. 避免为单个路由单独配置静态文件服务 #

不要使用app.use('/users', express.static(...))这类配置，它会拦截/users路径下的所有请求并映射到静态文件，导致你的业务路由无法生效。全局的app.use(express.static(...))已经可以让所有路由访问public文件夹，只要资源使用绝对路径即可。

4. 验证__dirname路径正确性（可选） #

由于你使用ES模块，__dirname的写法在Windows系统下可能存在路径解析问题，可以调整为更稳妥的写法：

const __dirname = path.resolve(path.dirname(new URL(import.meta.url).pathname));

测试步骤 #

1. 修改HTML中的资源路径为绝对路径
2. 更新server.js，确保所有页面路由返回正确的HTML文件
3. 重启Express服务器，访问/users等端点验证静态资源加载情况

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