在 Nuxt 热重载上清除控制台？

Question

在 Vue 中，我刚刚编辑了 main.js 文件以添加：

// on hot-reload clear the console
window.addEventListener("message", (e) => {
    if (e.data && typeof e.data === "string" && e.data.match(/webpackHotUpdate/)) {
        console.clear();
    }
});

但是在 Nuxt 中你只有配置文件。我尝试将该脚本添加到插件文件夹，但控制台从未清除。

onReload.js 在插件文件夹中。当我手动刷新页面而不是热重载时（即当我保存任何文件时），此文件似乎运行：

console.log("hello there");
window.addEventListener("message", (e) => {
  console.log("e.data is >  ", e.data);
  console.log("=== string > ", typeof e.data === "string");
  console.log("does it match > ", e.data.match(/webpackHotUpdate/));
  if (e.data && typeof e.data === "string" && e.data.match(/webpackHotUpdate/)) {
    console.log("hello world");
    console.clear();
  }
});

Nuxt 配置文件：

  plugins: [{ mode: "client", src: "~/plugins/onReload" }],

欢迎任何想法！

Answer 1

您需要添加一个插件。

/plugins/onReload.js 将包含您的函数：

Object.keys(window.__whmEventSourceWrapper).forEach((key) => {
  window.__whmEventSourceWrapper[key].addMessageListener((e) => {
    if (e.data.match(/built/)) {
      console.clear()
    }
  })
})

然后在 nuxt.config.js 你需要导入插件，并禁用服务器端渲染

plugins: [
    { mode: client, src: '~/plugins/onReload' }
]

Answer 2

已接受的答案对我不起作用，所以我最终创建了 clear-console.client.js，内容如下...

export default () => {
  if (module.hot) {
    module.hot.accept() // already had this init code

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

然后在nuxt.config.js中加入下面的plugins: ['~/plugins/clear-console.client.js']

希望这对其他人有帮助。

在 Nuxt 热重载上清除控制台？

Clearing console on Nuxt hot reload?

browser

console

vue.js

nuxt.js

hot-reload