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
    },

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

webpack-dev-server doesn't re-render page on code changes (when navigating away from initial page)

javascript

vue.js

webpack

webpack-dev-server