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

【问题标题】：Clearing console on Nuxt hot reload?在 Nuxt 热重载上清除控制台？
【发布时间】：2021-10-05 07:31:23
【问题描述】：

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

感谢任何想法！

【问题讨论】：

标签： vue.js browser console nuxt.js hot-reload

【解决方案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' }
]

【讨论】：

谢谢楼上的回复。这正是我尝试过的，控制台仍然显示上一个“会话”的日志。我知道您发布的代码正在运行，因为我在 window.addEventListener 之前的文件中放置了一个控制台日志，并且我看到了。
请仔细检查您的开发工具imgur.com/a/UGD5D30 中是否启用了保留日志，您也可以直接在控制台中运行console.clear()。如果它清除了日志，请告诉我。
我可以确认“保留日志”已禁用/未勾选。直接在控制台中运行“console.clear()”可以正常工作。当我保存文件和 Nuxt 热重载时，我必须测试 onReload.js 文件的控制台日志没有出现。似乎只有当我按下浏览器刷新时 onReload.js 才会执行.. ?
经过一堆黑客和检查。我发现 window.__whmEventSourceWrapper 是 webpack 用来生成 [HMR] 消息的东西。我已经更新了我的答案以反映这一点。这已经过测试并证明在我的情况下有效
哇，太棒了，真的很好找到！我什至没有想到这一点，也没有在环顾四周时遇到它。非常感谢！

【解决方案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']

希望这对其他人有所帮助。

【讨论】：