webpack-dev-server 不会在代码更改时重新渲染页面（当离开初始页面时）

Question

我在 webpack 5/Vuejs 3 应用程序中使用 webpack-dev-server 来利用在应用程序开发期间将代码更改保存在编辑器中后立即显示在浏览器中的功能（对该功能的详细解释我感兴趣，但我认为它在“热门”或“HMR”下交易）。

好处是这原则上是有效的。我可以在编辑器中更新 .vue 文件，保存它，查看 webpack-dev-server 重新编译，查看 JS 控制台日志，表明它检测到更改，并且更改（例如文本更改）显示在浏览器页面中。

但是，当在初始（硬）页面加载后导航到另一路由（URL）时，导致初始页面 URL 与当前 URL 不同，代码更改不会反映在浏览器页面中。所有其他步骤（例如编译、客户端上的更改检测、重新加载更改、日志）都会执行，但只是不更新​​浏览器页面。然而，当用户导航到其他地方并返回时，它会更新页面。

这个问题听起来很熟悉吗？我认为即使在单页应用程序中导航到另一个路由（URL）时，实时更新也应该正常工作（如果我的期望是错误的，请更正）。

我的相关部分webpack.conf.js（恕我直言，没什么特别的）：

  devServer: {
    historyApiFallback: {
      rewrites: [{
        from: /.*/,
        to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
      }]
    },
    hot: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    proxy: config.dev.proxyTable
  }

更新

有趣的是，<style>即使初始页面加载 URL 已更改，该部分的更新也会立即反映出来。

Answer 1

写吧historyApiFallback: true。它应该有效。

   devServer: {
      historyApiFallback: true,
      port: PORT || config.dev.port,
      hot: true,
      open: config.dev.autoOpenBrowser,
      proxy: config.dev.proxyTable
    },