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

如何解决在 Nuxt 热重载上清除控制台？

在 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 在 plugins 文件夹中。这个文件似乎只在我手动刷新页面时运行，而不是在热重载时运行（即当我保存任何文件时）：

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" }],

任何想法都值得赞赏！

解决方法

您需要添加一个插件。

/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' }
]