nuxt3/Vite-接入eruda-移动端调试工具我们在开发移动端 H5 项目，会经常需要使用调试工具，之前使用

我们在开发移动端 H5 项目，会经常需要使用调试工具，之前使用 VConsole, 现在给大家安利另一个款调试工具eruda

好用
功能丰富
......已经够了

Vite or Nuxt3

先看看 SPA项目接入

vite

main.js

if (import.meta.env.MODE === 'development') {
  fetch('https://unpkg.com/eruda@3.0.1/eruda.js')
    .then(response => response.text())
    .then(source => {
      eval(source);
      eruda.init(); // or window.eruda.init()
    })
    .catch(err => {
      console.log('加载失败')
      console.log(err)
    });
}

这就可以了，不需要 npm 安装

Nuxt3

添加一个插件 plugins/eruda.ts

export default defineNuxtPlugin((()) => {
  if (process.client) {
    if (import.meta.env.VITE_MOBILE_DEBUG) {
      // 如果你只想在手机端加载，就放开下面的注释
      // if (window.innerWidth > 768) return

      fetch('https://unpkg.com/eruda@3.0.1/eruda.js')
        .then(response => response.text())
        .then(source => {
          eval(source);
          window.eruda.init();
        })
        .catch(err => {
            console.log('加载失败')
            console.log(err)
        });
    }
  }
})

在环境变量里面，添加一个开关变量控制 .env.development

VITE_MOBILE_DEBUG = true

修改 package.json 加载 .env.xxx 配置文件 package.json

{
  "scripts": {
    "build": "nuxt build --dotenv .env.production",
    "dev": "nuxt dev --dotenv .env.development"
  },
}

注意： Nuxt3 默认是没有加载 .env.xxxx这些文件的，这就是为什么我们上面在 scripts 要指定一下

是不是很简单 😊😊😊

上述使用文档，目前已经给官网文档提了 PR

nuxt3/Vite-接入eruda-移动端调试工具

Vite or Nuxt3

链接