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
}

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

Answer 1

只写historyApiFallback: true。应该可以。

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