如何设置我的 Vue.js 站点以在每次热重载事件时清除浏览器的 Javascript 控制台？

Question

我有一个带有 Webpack Dev Middleware 的 Vue.js 站点（由 HTTP.sys Web 服务器通过 ASP.NET 核心站点提供服务，但我猜这无关紧要）。有谁知道如何设置我的站点以在每次热重载事件时清除浏览器的 Javascript 控制台？

这是我能找到的the only related link，但它似乎是我没有使用的网络服务器。我不确定为什么特定的 Web 服务器很重要。

Answer 1

您的 link 包含对您问题的答复。只需在您的 main.js 文件中添加：

window.addEventListener('message', (e) => {
  if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {
    console.log('hot reload happened')
    console.clear()
  }
})

完整 main.js 文件示例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

window.addEventListener('message', (e) => {
  if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {
    console.log('hot reload happened')
    console.clear()
  }
})

编辑：我没有阅读您对 github 问题的回答。您能否在多个活动的活动消息中提供某种形式的 JSON.stringify(e)，以便我们检查您有什么？

Answer 2

在我的主应用 .js 文件中：

if (module.hot) {
    module.hot.accept() // already had this init code 

    module.hot.addStatusHandler(status => {
        if (status === 'prepare') console.clear()
    })
}

这让它对我来说一直有效。

另见 https://webpack.js.org/api/hot-module-replacement/#addstatushandler。

如何设置我的 Vue.js 站点以在每次热重载事件时清除浏览器的 Javascript 控制台？

How can set up my Vue.js site to clear the browser's Javascript console on every hot reload event?

vue.js

webpack-hmr

hot-module-replacement

webpack-dev-middleware