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

Question

我有一个使用Vue.js和Webpack Dev Middleware的网站（通过HTTP.sys web服务器由ASP.NET Core网站提供服务，尽管我猜这并不重要）。 有谁知道如何设置我的网站以在每次热重载事件时清除浏览器的Javascript控制台？ 这里是我能找到的唯一相关链接，但它似乎是针对我没有使用的Web服务器。 我不确定为什么特定的Web服务器会有影响。

- Patrick Szalapski

---

在你的 created 中调用 console.clear() ？ - Roy J

在根组件上，是指根组件吗？ Created 不会在每个 HMR 上运行，只有在导致组件重新创建的 HMR 上才会运行。不过，总比没有好。 - Patrick Szalapski

Answer 1

在我的主要应用程序 .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。

- Patrick Szalapski

Answer 2

你的链接包含了针对你问题的响应。只要在你的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) 来检查您拥有什么？

- Hammerbot

---

当你运行 console.log(e instanceof MessageEvent) 时会发生什么？实际上，当我运行 JSON.stringify(e) 时，我只得到了 {"isTrusted":true}，但是当我运行 JSON.stringify(e.data) 时，我得到了各种数据。 - Hammerbot

嗯，看起来之前我的代码放错了地方？不确定。无论如何，再试一次，在HMR事件上，我在e.data.payload.payload中得到以下JSON：https://jsfiddle.net/szal/qp8rojng/ - 没有“webpackHotUpdate”，我看不出有什么区别可以将HMR事件与其他事件区分开来，其中e.data.payload.event === 'flush'。 - Patrick Szalapski

好主意，我们似乎更接近了。还有其他的想法吗？ - Patrick Szalapski

好的，所以这只是您收到的一条消息，您确定您没有收到其他消息吗？我只是想确保一下。在我的情况下，当热重载发生时，e.data只是一个字符串，但有时我也会收到您在fiddle中粘贴的那种消息。 - Hammerbot

是的，在这里我没有收到其他事件。我想我弄明白了，请看我的答案。感谢您促使我思考更多。 - Patrick Szalapski