是否在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中，你只有配置文件。我尝试将该脚本添加到plugins文件夹中，但控制台从未清除。

插件文件夹中的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']

希望这对其他人有帮助。