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

Posted 2023-03-08

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

【英文标题】：How can set up my Vue.js site to clear the browser's Javascript console on every hot reload event?

【发布时间】：2019-04-03 21:05:24

【问题描述】：

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

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

【问题讨论】：

在您的created 中调用console.clear()？

在根组件上，你的意思是？ Created 不会在每个 HMR 上运行，只会在导致重新创建组件的 HMR 上运行。不过，总比没有好。

【参考方案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。

【参考方案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)，以便我们检查您有什么？

【讨论】：

当您console.log(e instanceof MessageEvent) 时会发生什么？事实上，当我JSON.stringify(e) 我只有"isTrusted":true 但当我JSON.stringify(e.data) 我有各种各样的数据

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

好主意，我们似乎更接近了。还有什么想法吗？

好的，这只是您收到的一条消息，您确定没有收到其他消息吗？我只是想确定一下。就我而言，e.data 只是发生热重载时的一个字符串，但我有时也会收到您粘贴在小提琴中的那种消息

是的，我在这里没有收到其他活动。我想我明白了；看我的回答。感谢您提出更多想法。