深度路由的 webpack historyApiFallback 配置
webpack historyApiFallback configuration for deep routes
webpack-dev-server 可以设置为将您发送回 index.html 并为单个路由找到您的脚本,例如 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 它会让人感到困惑。
devServer: {
contentBase: './dist',
historyApiFallback: true
},
服务器响应http://localhost:4301/sdr/dog
x GET http://localhost:4301/sdr/bundle.js
在搜索 bundle.js
的路径中添加 /sdr
我该如何解决这个问题。 ...然后我将在 NGINX 上尝试它,然后使用 react-router,然后使用 navigo,然后使用 react-router-redux ....
我也有这个问题。我发现解决方案是将 publicPath: '/'
添加到我的输出下的 webpack 配置中。
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
这里是对这个问题有更详细讨论的论坛:
https://github.com/webpack/webpack/issues/443
webpack-dev-server 可以设置为将您发送回 index.html 并为单个路由找到您的脚本,例如 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 它会让人感到困惑。
devServer: {
contentBase: './dist',
historyApiFallback: true
},
服务器响应http://localhost:4301/sdr/dog
x GET http://localhost:4301/sdr/bundle.js
在搜索 bundle.js
的路径中添加 /sdr我该如何解决这个问题。 ...然后我将在 NGINX 上尝试它,然后使用 react-router,然后使用 navigo,然后使用 react-router-redux ....
我也有这个问题。我发现解决方案是将 publicPath: '/'
添加到我的输出下的 webpack 配置中。
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
这里是对这个问题有更详细讨论的论坛: https://github.com/webpack/webpack/issues/443