React 路由器允许 React 应用程序处理/arbitrary/route. 为了让它工作，我需要我的服务器在任何匹配的路由上发送 React 应用程序。
但是webpack 开发服务器不处理任意端点。
这里有一个使用额外的快速服务器的解决方案。 如何允许 webpack-dev-server 允许来自 react-router 的入口点
但我不想启动另一个快速服务器来允许路由匹配。我只想告诉 webpack 开发服务器匹配任何 url 并将我的 react 应用程序发送给我。请。
如何告诉 webpack 开发服务器为任何路由提供 index.html
IT技术
reactjs
ecmascript-6
webpack
react-router
2021-04-11 04:48:30
6个回答
我找到了包含一个小配置的最简单的解决方案：
devServer: {
port: 3000,
historyApiFallback: {
index: 'index.html'
}
}
我通过访问：PUSHSTATE WITH WEBPACK-DEV-SERVER发现了这一点。
historyApiFallback对官方文档选项的WebPack-DEV-服务器清楚地解释了如何通过使用实现
historyApiFallback: true
当找不到路由时，它只是回退到 index.html
或者
// output.publicPath: '/foo-app/'
historyApiFallback: {
index: '/foo-app/'
}
将公共路径添加到 config 有助于 webpack 理解真正的 root ( /) 即使你在子路由上，例如。/article/uuid
所以修改你的 webpack 配置并添加以下内容：
output: {
publicPath: "/"
}
devServer: {
historyApiFallback: true
}
没有publicPath资源可能无法正确加载，只有 index.html。
在 Webpack 上测试 4.6
配置的较大部分（只是为了有更好的图片）：
entry: "./main.js",
output: {
publicPath: "/",
path: path.join(__dirname, "public"),
filename: "bundle-[hash].js"
},
devServer: {
host: "domain.local",
https: true,
port: 123,
hot: true,
contentBase: "./public",
inline: true,
disableHostCheck: true,
historyApiFallback: true
}
像这样对我有用
devServer: {
contentBase: "./src",
hot: true,
port: 3000,
historyApiFallback: true
},
在 riot 应用程序上工作
我的情况有点不同，因为我在运行ng eject命令后使用带有 webpack 的 angular CLI 和“eject”选项。我修改了 package.json 中“npm start”的弹出 npm 脚本以传入 --history-api-fallback 标志
“开始”：“webpack-dev-server --port=4200 --history-api-fallback ”
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200 --history-api-fallback",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"startold": "webpack-dev-server --inline --progress --port 8080",
"testold": "karma start",
"buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"},