当我在子页面上刷新时,Webpack“无法获取”

enyaitl3  于 2023-04-21  发布在  Webpack
关注(0)|答案(2)|浏览(112)

所以我正在开发一个电子学习应用程序。
昨天我手动配置了webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults" 
              }],
              '@babel/preset-react'
            ]
          }
        }]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
  externals: {
    "pdfjs-dist": "pdfjsLib",
    "pdfjs-dist/build/pdf.worker.js": "pdfjsWorker"
  }
}

extarnals的事情是显示一个自定义的PDF查看器。
现在在我的package.json中我有这个

"dev": "webpack-dev-server --config webpack.config.js --hot",
    "build": "webpack",

而且它工作得很好,建设也很好,发展也很好。但是我有一个问题。
当我在屏幕上链接并刷新时,它显示:“http://localhost:8080/mijn-account”它给出错误“无法获取/mijn-account”
所以,然后我需要回到“http://localhost:8080/”,然后点击按钮,转到“http://localhost:8080/mijn-account”,然后我看到的变化.但它花费这么多时间.我需要做什么?
我已经尝试了一些东西与热的reloud,但我不明白它,当我保存的“mijn帐户”文件,它会自动刷新,所以这很好,但我怎么能解决这个错误?

juud5qan

juud5qan1#

您的路由在生产版本中不起作用?如果是这样,问题不是在webpack中,而是在服务器的设置中。您需要配置服务器将所有页面重定向到index.html而不是/something.html
nginx示例:

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
vxbzzdmp

vxbzzdmp2#

我观察到任何MUI组件在项目中使用,其中包含href='/'标签内<TextLink href="{Link}" /> .而不是尝试使用useNavigate钩子重定向链接,与webpack下devServer内的historyApiFallback:true.这可能会解决问题谢谢

相关问题