Reactjs 如何让Webpack开发服务器在Vagrant中与react路由器一起工作？

我正在使用Webpack（v.4.44.2）和Vagrant进行React/Typescript项目。出于路由目的，我尝试从

react router dom

实现BrowserHistory。可以想象，

http://localhost:8000/myUrl

此时刷新/手动输入时工作不正常。经过一番研究，我尝试设置

devServer.historyApiFallback

和

output.publicPath

，但都没有成功

我的网页包设置如下所示：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './src/index.tsx',
  target: 'web',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // `.js` for external libs (/node_modules/)
  },
  module: {
    rules: [
      { test: /\.tsx?$/i, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.tsx?$/i, use: 'prettier-loader', enforce: 'pre', exclude: /node_modules/ },
      { test: /\.css?$/i, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'], exclude: /node_modules/ },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') }),
    new MiniCssExtractPlugin({ filename: 'main.css' })
  ],
  devServer: {
    compress: true,
    historyApiFallback: {
      index: path.join(__dirname, 'dist'),
      // index: '/',
    },
    // historyApiFallback: true,
    host: '0.0.0.0',
    public: '10.10.10.61',
    port: 8000,
    watchOptions: {
      poll: true
    }
  }
};

如您所见，我尝试了

historyApiFallback

的几个值，但我觉得我遗漏了一些东西，因为刷新时仍然存在404错误。由于我在一个流浪汉里面，我想知道这是否是一个关于开发包没有写入磁盘的问题？或者是一些与流浪网络有关的事情

我的档案如下：

Vagrant.configure(2) do |config|
  # see https://webpack.js.org/guides/development-vagrant/
  config.vm.network :private_network, ip: "10.10.10.61"

  config.ssh.insert_key = false
  config.vm.define "dev", primary: true do |app|
    app.vm.provider "docker" do |d|
      d.image = "someImage"

      d.name = "#{PROJECT}_dev"

      d.has_ssh = true
      d.ports = ["0.0.0.0:8000:8000"]
      d.env = DOCKER_ENV
    end
    [...]
  end
end

---

你知道吗？

问题的解决方法如下

流浪设置：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './src/index.tsx',
  target: 'web',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // `.js` for external libs (/node_modules/)
  },
  module: {
    rules: [
      { test: /\.tsx?$/i, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.tsx?$/i, use: 'prettier-loader', enforce: 'pre', exclude: /node_modules/ },
      { test: /\.css?$/i, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'], exclude: /node_modules/ },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
      filename: path.resolve(__dirname, 'dist', 'index.html')
    }),
    new MiniCssExtractPlugin({ filename: 'main.css' })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    compress: true,
    historyApiFallback: {
      disableDotRule: true, // this was what messed me up : in my URL, I have IDs, which for some reason contains dots
      index: '/', // same as output.publicPath
    },
    host: '0.0.0.0',
    public: '10.10.10.61',
    port: 8000,
    watchContentBase: true,
    watchOptions: {
      poll: true
    }
  }
};

没有与文件系统或vagrant相关的棘手问题。只是一个我没有注意到的URL“点”问题----