webpack - Webpack devserver反应路由器BrowerRouter 404
问题描述
我知道以前有人问过这个问题,但我已经为此奋斗了几个小时,我找不到一个工作设置,用于本地开发设置,将 react 路由器与 BrowserRouter 和 webpack 开发服务器一起使用。
当我转到任何不是 index.html 的路线时,我会收到 404 错误。我从这个 blospost https://ui.dev/react-router-cannot-get-url-refresh/开始从这里的问题中尝试了多种配置,但我无法使其工作。
我确实在初始控制台输出上看到了这个:
ℹ 「wds」: Project is running at http://localhost:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/danielfrg/workspace/nbviewer.js/dist
ℹ 「wds」: 404s will fallback to /
ℹ 「wdm」: Hash: 3409aa1e47265f63217d
所以我预计 404 会退回到 / 但它没有这样做。
这是我的 webpack.config.js:
var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const extractPlugin = {
loader: MiniCssExtractPlugin.loader,
};
module.exports = (env, argv) => {
const IS_PRODUCTION = argv.mode === "production";
const config_dist = {
entry: [path.resolve(__dirname, "src", "index.js")],
output: {
path: path.resolve(__dirname, "dist"),
filename: "nbviewer.js",
publicPath: "/",
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.s?[ac]ss$/,
use: [extractPlugin, "css-loader", "sass-loader"],
// use: ["null-loader"],
},
// Bundle Jupyter Widgets and Font Awesome
{
test: /\.(eot|ttf|woff|woff2|svg|png|gif|jpe?g)$/,
loader: require.resolve("url-loader"),
// loader: require.resolve("file-loader"),
// options: {
// name: "[name].[ext]?[hash]",
// outputPath: "assets/",
// },
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin({
filename: "index.css",
}),
new FileManagerPlugin({
onEnd: {
copy: [
{
source: path.resolve(__dirname, "static"),
destination: path.resolve(__dirname, "dist"),
},
],
},
}),
// new BundleAnalyzerPlugin(),
],
devServer: {
port: 3000,
// contentBase: "/",
contentBase: path.resolve(__dirname, "dist"),
historyApiFallback: { index: "/" },
publicPath: "/",
},
node: {
fs: "empty",
},
mode: IS_PRODUCTION ? "production" : "development",
devtool: "source-map",
};
let config = [config_dist];
return config;
};
这里的解决方案是否像其他一些问题提到的那样使用代理?看起来有些人没有它就可以工作。谢谢你的帮助!
解决方案
在使用不同的 URL 之后,我注意到一个基本 url,如:http://localhost:3000/asdf 确实被重定向,在我的情况下,我正在测试具有扩展名的文件,所以它总是失败。
要修复它,我只需要添加:disableDotRule: true
。
devServer: {
port: 3000,
contentBase: path.resolve(__dirname, "dist"),
historyApiFallback: { index: "/", disableDotRule: true },
}
希望这对将来的人有所帮助!
推荐阅读
- python - Python 字谜字符串
- flutter - 显示尽可能多的元素而不会溢出
- typescript - 索引表达式不是“数字”类型
- javascript - sequelize 验证多列 [this.column got undefined]
- android - 管理 Google Play 订阅不起作用
- keras - “连接”层需要具有匹配形状的输入,连接轴除外
- javascript - Lua表到js数组
- c# - Stimulsoft 中的 Parent Key 和 ChildKey 是相同的
- html - document.getElementById 在 Vue2 组件中未定义......因为滥用手表?
- python - 线性回归器无法预测一组值;错误:ValueError:形状(100,1)和(2,1)未对齐:1(dim 1)!= 2(dim 0)