BrowseRouter MIME 类型错误

Question

我有react application with react-router，你怎么看标题，我用的是BrowserRouter，出现如下错误（image）：

拒绝应用来自 'http://localhost:8000/public/login/main.bfa4608...css' 的样式，因为它的 MIME 类型 {'text/html'} 不是受支持的样式表，并且强制执行严格的 MIME 检查。

拒绝执行来自 'http://localhost:8000/public/login/manifest.b925636...js' 的脚本，因为它的 MIME 类型 {'text/html'} 不可执行，并且强制执行严格的 MIME 检查。

拒绝执行来自 'http://localhost:8000/public/login/main.bfa4608...js' 的脚本，因为它的 MIME 类型 {'text/html'} 不可执行，并且强制执行严格的 MIME 检查。

当我重新加载页面 /public/login/，如果我在 /public 上重新加载页面，或从 /public 重定向到 /public/login/ 时，它会发生 - 一切正常。 所以看起来错误只出现在子路由上。

我为第一个错误找到了另一种解决方案，将其写入 Webpack 的开发设置 (image)：

devServer: {
    historyApiFallback: {
        disableDotRule: true
    }
},

但这又产生了一个错误（image）：

未捕获的语法错误：意外标记'

未捕获的语法错误：意外标记'

还注意到我收到了HTML instead of a js file (screenshot)

Answer 1

问题是 webpack 正在尝试为路由提供服务：

localhost:8080/path/subpath

就好像它是一个文件夹一样，因为默认配置是serve from the current working directory。正如您所发现的（我写此回复的全部原因是转录您的图片内容）您需要将 webpack 的服务器设置为仅从根目录提供服务（例如在 configs/webpack/common.js 中）：

module.exports = {
    ...
    output: {
        publicPath: '/'
    }
}