反应路由器v4 broswer历史记录无法使用代码拆分

Question

当使用哈希历史代码分裂与反应路由器一起使用但现在我即将投入生产并且我想切换到浏览器历史时它会在我尝试更改路由时出现错误，例如，如果我尝试转到登录路由127.0 .0.1：8080 / auth / login：

拒绝执行' http://127.0.0.1:8080/auth/3.bundle.js '中的脚本，因为它的MIME类型（'text / html'）不可执行，并且启用了严格的MIME类型检查。

和

未捕获（在承诺中）错误：加载块3失败。 （错误： http ： //127.0.0.1 ： 8080 / auth / 3.bundle.js）HTMLScriptElement.onScriptComplete（bootstrap：108）

这是我的路由器

<Router history={history}>
    <ConnectApp />
</Router>

连接应用：

 <Switch>
    {/* Front end */}
    <Route path="/" component={AsyncHome} exact />
    <Route path="/post/:id" component={AsyncPost} exact />

    {/* authentication */}
    <Route path="/auth/:section" component={AsyncLogin} exact />

    {/* Backend */}
    <PrivateRoute path="/admin/:path" component={AsyncAdmin} exact />
    <PrivateRoute
        path="/admin/edit-post/:id"
        component={AsyncEditPost}
        exact
    />

    <Route component={Err404} />
</Switch>

history.js：

import { createBrowserHistory } from 'history';

export default createBrowserHistory({
    // add configurations here
});

webpack.dev.config.js

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        historyApiFallback: true
    }, 
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}

*如果还有更多代码需要添加，请在评论中注明

谢谢

Answer 1

将publicPath:"/"添加到配置中：

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        historyApiFallback: true
    }, 
    plugins: [
        new BundleAnalyzerPlugin()
    ],

    output: {
        path: path.resolve('dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/' // Add this line
    },
}