React+Webpack+Node.js多斜杠路由静态资源加载问题解决

1. 修正Webpack配置，设置公共路径 #

问题核心是静态资源采用相对路径，刷新时浏览器会以当前路由（如/product/1）为基准解析资源路径。需通过Webpack的output.publicPath指定资源加载的基准根路径，而非修改output.filename（Webpack要求filename必须为相对路径）。

修改Webpack配置文件：

module.exports = {
  // 其他配置项...
  output: {
    path: path.resolve(__dirname, 'dist'), // 资源输出的绝对物理路径
    filename: 'js/main.[fullhash:8].js', // 相对于output.path的相对路径
    publicPath: '/', // 关键：设置所有静态资源的加载基准为根路径
    clean: true // 可选：每次构建自动清空dist目录
  },
  // 其他配置项...
};

publicPath: '/'会让所有JS、CSS资源以http://localhost:8080/js/...、http://localhost:8080/css/...的绝对路径加载，不受当前路由影响。

2. 修正Node.js后端的SPA路由 fallback 逻辑 #

当前后端用express.static处理所有路由的写法错误，SPA路由 fallback 应直接返回index.html，而非通过静态资源中间件处理。

修改后端代码：

const express = require('express');
const path = require('path');
const config = require('./config');

const app = express();

// 优先处理静态资源请求
app.use(express.static(path.join(__dirname, 'dist'), {
    maxage: '30d',
}));

// 所有非静态资源的请求，直接返回index.html交给React Router处理
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(config.port, () => {
    console.log(`Listening on :${config.port}`);
});

3. 验证效果 #

1. 重新执行Webpack构建，确保dist目录下的资源路径符合预期；
2. 启动Node后端，访问/product/1等路由，刷新页面或直接输入URL，检查静态资源加载路径是否为根路径开头，确认无加载错误。

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