nuxt3使用vconsole的正确姿势

vConsole github 议题

Nuxt 是一个服务端渲染的项目，vconsole 是一个前端的调试工具。由于服务端渲染的特性，vconsole 无法直接在服务端运行。

app: {
    head: {
      script: [
         {
           src: '//unpkg.com/vconsole@latest/dist/vconsole.min.js',
           type: 'text/javascript',
         },
      ],
    },

初始化：

if (process.client) {
  process.dev && window.VConsole && new window.VConsole()
}

上述初始化方式虽然可以在页面引入vconsole，但是无法正确捕获到请求。

将初始化方式放在config文件中：

  app: {
    head: {
      script: [
         {
          src: '//unpkg.com/vconsole@latest/dist/vconsole.min.js',
           type: 'text/javascript',
         },
         { innerHTML: 'new VConsole()' },
      ],
    },
  },

使用eruda也是同样的引入方式

liriliri/eruda#303

nuxt3使用vconsole的正确姿势

参考