Как настроить мой сайт Vue.js для очистки консоли Javascript браузера при каждом событии горячей перезагрузки?

Question

У меня есть сайт Vue.js с Webpack Dev Middleware (обслуживается через сайт ASP.NET Core веб-сервером HTTP.sys, хотя я предполагаю, что это не имеет значения). Кто-нибудь знает, как я могу настроить свой сайт для очистки консоли Javascript браузера при каждом событии горячей перезагрузки?

Вот единственная связанная ссылка, которую я могу найти, но, похоже, она предназначена для веб-сервера, которым я не пользуюсь. Я не уверен, почему конкретный веб-сервер будет иметь значение.

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/.

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) на вашем событии сообщения о нескольких событиях, чтобы мы могли проверить, что у вас есть?