React Router v4 Browser History模式代码分割失效问题求助

嘿，这个问题我之前帮好几个开发者踩过坑，本质是资源路径的相对/绝对定位 + 服务器路由 fallback 配置的问题，咱们一步步拆解解决：

先搞懂为啥报错 #

当你用Hash History时，浏览器只会把#前面的内容当成实际路径，#/auth/login里的/auth/login不会影响资源请求的基准路径，所以chunk文件会从根域名（比如http://127.0.0.1:8080/）请求。

但切换到Browser History后，当前路由是/auth/login，浏览器会默认以当前路径的父目录/auth/作为资源请求的基准，于是就跑去请求http://127.0.0.1:8080/auth/3.bundle.js——可你的chunk文件明明在根目录下啊！服务器找不到这个文件，就返回了默认的HTML页面，自然就报「MIME类型错误」和「加载chunk失败」了。

分两步彻底解决 #

1. 配置Webpack（或Create React App）固定资源基准路径 #

你需要让打包后的所有资源都以根路径为基准生成引用，而不是相对当前页面：

• 如果是手动配置Webpack：在webpack.config.js的output里添加publicPath: '/'：

module.exports = {
  // ...其他配置项
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/' // 关键！强制资源从根路径加载
  }
};

• 如果是Create React App创建的项目：直接在package.json里加一行"homepage": "/"，它会自动帮你设置好Webpack的publicPath。

2. 配置服务器的路由Fallback（核心！） #

Browser History模式下，服务器必须处理所有路由请求，返回你的index.html——不然用户直接刷新/auth/login或者从外部链接进入时，服务器会返回404，同时也会间接影响资源加载。这里给几个常见服务器的配置：

• Nginx：在你的server块里添加：

location / {
  try_files $uri $uri/ /index.html;
}

• Express：用中间件处理所有路由：

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

// 先托管静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 所有路由请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(8080);

• Apache：在项目根目录创建.htaccess文件，写入：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

验证是否生效 #

重新打包部署后，打开浏览器的开发者工具看Network面板：如果chunk文件的请求路径是http://127.0.0.1:8080/3.bundle.js（不带/auth/前缀），同时刷新/auth/login也能正常加载页面，那就说明问题解决啦！

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