Question

我使用Webpack dev服务器和browserHistory in React Router通过HTML5 History API操作网址。 historyapifallback-option在我的webpack配置文件中不起作用。刷新http://localhost:8080/users或http://localhost:8080/products后，我收到了404。

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');

const TARGET = process.env.npm_lifecycle_event;

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'dev' || !TARGET) {
    module.exports = merge(common,{
        devtool: 'eval-source-map',
        devServer: {
            historyApiFallback: true
        },
        output: {
            filename: 'index.js',
            publicPath: 'http://localhost:8090/assets/'
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('dev')
            })
        ]
    });
}

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title>Test</title>
    </head>
    <body>
        <div id="content">
            <!-- this is where the root react component will get rendered -->
        </div>
        <script src="http://localhost:8090/webpack-dev-server.js"></script>
        <script type="text/javascript" src="http://localhost:8090/assets/index.js"></script>
    </body>
</html>

index.jsx

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, browserHistory, Link} from 'react-router';

class Home extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div>
          I am home component
          <Link to="/users" activeClassName="active">Users</Link>
          <Link to="/products" activeClassName="active">Products</Link>
        </div>;
  }
}

class Users extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div> I am Users component </div>;
  }
}

class Products extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div> I am Products component </div>;
  }
}

ReactDOM.render(
    <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
        <Route path="/" component={Home}/>
        <Route path="/users" component={Users} type="users"/>
        <Route path="/products" component={Products} type="products"/>
    </Router>
    , document.getElementById('content'));

的package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --history-api-fallback"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "events": "^1.1.0",
    "jquery": "^2.2.3",
    "path": "^0.12.7",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-mixin": "^3.0.5",
    "react-router": "^2.4.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.8.0",
    "http-server": "^0.9.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.12.0"
  }
}

我尝试在配置中更改 devServer ，但它没有帮助：

devServer: {
    historyApiFallback: {
        index: 'index.html',
    }
},

devServer: {
    historyApiFallback: {
        index: 'index.js',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.html',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.js',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.js',
    }
},
output: {
    filename: 'index.js',
            publicPath: 'http://localhost:8090/assets/'
},

Answer 1

我今天遇到了同样的问题。让webpack.config.js中的config：output.publicPath等于devServer.historyApiFallback.index和指出html文件路由 .my webpack-dev-server版本是1.10.1并且运行良好。 http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option不起作用，你必须指出html文件路由。

例如

module.exports = {
    entry: "./src/app/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle-main.js'
    },
    devServer: {
        historyApiFallback:{
            index:'build/index.html'
        },
    },
};

historyApiFallback.index指示当url路径与真实文件不匹配时，webpack-dev-server使用historyApiFallback.index中的文件配置在浏览器而不是404页面中显示。然后关于你的路线改变的所有事情都让你的js使用react-router来做。

Answer 2

output: {
    ...
    publicPath: "/"
  },

添加公共路径为我解决了

Answer 3

参考：https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

这适用于任何react-router

您必须添加historyApiFallback: true

module.exports = {
    cache: true,
    entry: "./index.js",
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    context: SRC,
    devServer: {
        contentBase: path.resolve(__dirname, 'public/assets'),
        stats: 'errors-only',
        open: true,
        port: 8080,
        compress: true,
        historyApiFallback: true
    },
...
}

Answer 4

我遇到了这个问题，只能在Webpack 4.20.2中使用index: '/'进行修复

        historyApiFallback: {
            index: '/'
        }

Answer 5

这里发生了一件非常棘手的事情！

404 可以是两种完全不同的下面的东西。您可以打开 Chrome 的网络选项卡，查看 404 是初始请求，还是其中的资产。

如果你不怕终端，你也可以通过curl -v http://localhost:8081/product查看实际的HTTP响应代码。

案例 1：初始 HTML 页面上的 404

在这种情况下，historyFallbackApi 的设置不正确。

通常只有 historyApiFallback: true 应该在 Webpack 的 devServer 配置中工作。 (source) 但是，如果您碰巧有一个自定义的 output 文件夹，则必须按照其他人的建议将 index 的 historyApiFallback 属性设置为相同的路径此问题的答案如 jsdeveloper's 或 echzin's。

案例 2：资产的 404（例如 `bundle.js` 或 `vendor.js`）

这个很有趣！

在这种情况下，您确实获得了初始 HTML（即，如果您在 URL 前添加 view-source: 以变为 view-source:http://localhost:8081/admin，您会看到您的 HTML，和/或 curl 命令显示HTML)，但该页面在浏览器中不起作用。

historyApiFallback 所做的，这听起来很神奇，实际上只是将 Express 服务器的 req.url 设置为 index.html 文件，用于任何传入的 GET 请求域。 (The main two lines in the Source Code)

但是，如果您的资产的路径是相对的（例如，在视图源中，您看到 <script src="vendor.js"></script>）AND您登陆的路径不在同一路径-深度作为索引（例如，当主服务器位于 http://localhost:8081/admin/user/12/summary 时，您正在尝试加载 http://localhost:8081/admin），结果是它无法为您的 JavaScript 代码找到 .js 文件。（就我而言http://localhost:8081/admin/user/12/vendor.js）

请注意，这里处理 HTML5 History 的任何路由器（react 路由器或 vue 路由器）都知道如何在初始加载时将内部路径初始化为 document.location.href。但是，它不知道正确更新资产路径的“根”在哪里。（就责任而言，它甚至可能不是它的工作。）因此，资产的路径将根据 URL 的路径而不是 index.html 的路径来计算！因此，对于没有绝对 src="vendor.js" 前缀的 /，它会尝试查找 /admin/user/12/vendor.js 而不是 /vendor.js。

您在此处需要做的是确保您的 WebPack 的 output 路径是绝对路径并以 / 开头，因此无论登录 URL 是什么，它总是有效的。即它总是 <script src="/vendor.js"></script> 在 HTML 源代码中。

为此，您必须将 output.publicPath 设置为绝对路径（带或不带域）。您可以通过上面的 view-source: 或 curl 技术验证这一点。 :)

historyApiFallback在Webpack dev服务器中不起作用

5 个答案:

案例 1：初始 HTML 页面上的 404

案例 2：资产的 404（例如 `bundle.js` 或 `vendor.js`）

historyApiFallback在Webpack dev服务器中不起作用

5 个答案:

案例 1：初始 HTML 页面上的 404

案例 2：资产的 404（例如 bundle.js 或 vendor.js）

案例 2：资产的 404（例如 `bundle.js` 或 `vendor.js`）