推荐一个好用的Vite插件：移动端开发利器vite-plugin-eruda替代vconsole插件

推荐一个好用的Vite插件

• vite-plugin-eruda - 帮助您在开发环境中自动打开调试工具.

安装

安装在vue 创建的项目下，它会自动加载此插件。Vue CLI

npm install --save-dev vue-cli-plugin-eruda

# If Vue CLI is installed globally
vue add erudu

全局变量

注入后，将提供一个全局变量来调用 eruda API。

var eruda = require("eruda");
window.eruda === undefined && (window.eruda = eruda);

用法

// vue.config.js
module.exports = {
  // ... your configs 

  pluginOptions: {
    eruda: {
      // options
    }
  }
}

选项

Options key	Type	Description
enable	boolean	当NODE_ENV ！== 默认情况下启用'生产'插件。您可以传递 true/false 以强制启用它。
exclude	regexp | regexp[]	用于排除您不想注入 eruda 的条目。例如，您在 vue.config 中使用“pages”选项.js
plugins	string[]	传递插件名称以启用 eruda 插件。您可以使用完整模块（['eruda-fps']）或速记（例如['fps'] ）
container	element	容器元素。如果未设置，它将直接在 html 根元素下追加一个元素
tool	string[] | string	选择您想要的eruda工具，默认情况下将添加所有工具。
autoScale=true	boolean	自动缩放 eruda 用于不同的视口设置。
useShadowDom=true	boolean	使用 shadow dom 进行 css 封装。

container, , , are eruda's default configuration. You can check document for more information.toolautoScaleuseShadowDom

许可证

麻省理工学院

vite-plugin-eruda-plus

资料：

vue-cli-plugin-eruda - npm (npmjs.com)https://www.npmjs.com/package/vue-cli-plugin-erudavite-plugin-eruda-plus - npm (npmjs.com)https://www.npmjs.com/package/vite-plugin-eruda-plus

Vite插件大全_GF~的博客-CSDN博客_vite插件Vite下一代前端开发与构建工具Vite优势 ???? 极速的服务启动 ⚡️ 轻量快速的热重载 ????️ 丰富的功能 ???? 优化的构建 ???? 通用的插件 ???? 完全类型化的APIVue 3Vitesse 基于Vite的入门模板.vite-vue3-tailwind-starter Vitehttps://blog.csdn.net/ChuGuoFei/article/details/120884438?spm=1001.2014.3001.5502

 GitHub - wuxiuran/vite-plugin-eruda: A vite plugin help you automatically open debugging tools in the development environmenthttps://github.com/wuxiuran/vite-plugin-eruda