Node.js Express重定向至index.html时无法加载Webpack Bundle JS问题

我之前也碰到过几乎一模一样的坑！这大概率是资源路径的相对/绝对引用问题在搞鬼——当你通过Passport重定向到index.html时，页面的URL路径可能发生了变化（比如从/login跳转到非根路径的地址），而如果Bundle的引用路径是相对路径，浏览器就会从错误的位置去加载资源，自然找不到。下面是几个我亲测有效的解决思路：

1. 修正Webpack的publicPath配置 #

Webpack打包时的publicPath决定了静态资源的基础引用路径。如果它被设成了相对路径（比如./），当页面处于嵌套URL（比如/auth/callback）时，浏览器会尝试从/auth/下去找Bundle文件，这显然不对。

把它改成绝对路径就能解决这个问题：

// webpack.config.js
module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 关键：设为根路径的绝对引用
  }
}

2. 确保Express正确托管静态资源 #

要保证Express能正确处理静态资源的请求，并且这个托管路由要放在所有API路由、Passport路由之前，避免请求被提前拦截：

// app.js
const path = require('path');
const express = require('express');
const app = express();

// 先托管静态资源目录（比如打包后的dist文件夹）
app.use(express.static(path.join(__dirname, 'dist')));

// 再注册Passport相关路由、API路由等
// app.use('/auth', passportRoutes);
// ...其他路由

3. 检查index.html中的Bundle引用路径 #

如果是手动在index.html里写的script标签，一定要用绝对路径引用Bundle，而不是相对路径：

<!-- 正确写法 -->
<script src="/bundle.js"></script>

<!-- 错误写法（重定向后会找不到） -->
<script src="./bundle.js"></script>

4. 重定向到根路径而非直接指向index.html #

Passport验证成功后，尽量重定向到网站根路径/，让Express自动加载index.html，而不是直接重定向到/index.html：

// Passport回调示例
passport.authenticate('local', {
  successRedirect: '/', // 正确：跳转到根路径
  failureRedirect: '/login'
});

核心逻辑就是：让静态资源的引用路径始终基于网站根目录，不管当前页面的URL是什么，浏览器都能精准找到Bundle文件。我当时就是调整了Webpack的publicPath和Express静态资源的托管顺序，问题就立刻解决了！

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