深度路由的 webpack historyApiFallback 配置

问题描述

webpack-dev-server 可以设置为将您发送回 index.html 并为单个路由查找脚本，例如 http://localhost:4301/sdr 但是当您放入更深的路由(或末尾带有/的单个路由)http://localhost:4301/sdr/dog 弄糊涂了.

webpack-dev-server can be set up to send you back to index.html and find your scripts for a single route like http://localhost:4301/sdr but when you put in a deeper route (or a single route with a / at the end) http://localhost:4301/sdr/dog it gets confused.

  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },

使用 http://localhost:4301/sdr/dog 服务器响应

x GET http://localhost:4301/sdr/bundle.js

将/sdr 添加到搜索 bundle.js 的路径

adding /sdr to the the path in its search for bundle.js

我该如何解决这个问题....然后我将在 NGINX 上尝试它，然后使用 react-router 然后使用 navigo 然后使用 react-router-redux ....

How can I fix this. ... then I will try it on NGINX then with react-router then with navigo then with react-router-redux....

推荐答案

我也遇到了这个问题.我发现解决方案是将 publicPath: '/' 添加到输出下的 webpack 配置中.

I also had this issue. I found the solution was to add publicPath: '/' to my webpack config under output.

const base = {
  entry: [
    PATHS.app,
  ],
  output: {
    path: PATHS.build,
    publicPath: '/',
    filename: 'index_bundle.js',
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
      {test: /\.json$/, loader: 'json'},
    ],
  },
  resolve: {
    root: path.resolve('./app'),
  },
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    contentBase: PATHS.build,
    hot: true,
    inline: true,
    progress: true,
    proxy: {
      '/api': 'http://127.0.0.1:5000',
    },
    historyApiFallback: true,
  },
  plugins: [HTMLWebpackPluginConfig, new webpack.HotModuleReplacementPlugin()],
}

export default Object.assign({}, base, developmentConfig)

这里是这个属性的更详细的文档:http://webpack.github.io/docs/configuration.html#output-publicpath

Here is more detailed documentation of this property: http://webpack.github.io/docs/configuration.html#output-publicpath

以下是对该问题进行更详细讨论的论坛:https://github.com/webpack/webpack/issues/443

Here is the forum where there is a more detailed discussion of this issue:https://github.com/webpack/webpack/issues/443

这篇关于深度路由的 webpack historyApiFallback 配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！