如何在Nuxt.js项目中使用vConsole

vConsole 是腾讯公司维护的一个开源项目,用来让前端工程师进行移动端调试,非常好用。但是官方只提供了一般情况下的用法,并没有 Nuxt.js 项目中的用法,所以特此记录一下引入方式,并且区分生产环境和开发环境,只在开发环境引入。
首先,通过 npm install vconsoleyarn add vconsole 安装 vconsole,安装完成后,项目的 package.json 文件的 dependencies 中就会加入 vconsole。
然后,在项目的 plugins 文件夹下新建 vconsole.js 文件(plugins 文件夹用来存放第三方插件,比如 element-ui,vconsole 等),文件内容如下:

import VConsole from 'vconsole'
const vConsole = process.env.NODE_ENV === 'development' ? new VConsole() : ''
export default vConsole

可以看到,这里通过全局变量 process.env.NODE_ENV 来判断了当前环境,如果是开发环境 development,那么就正常创建 VConsole 的实例,然后引入,如果是其他环境,就不创建实例。这个条件根据项目需要由你自己决定。
最后,在 nuxt.config.js 文件的 plugins 变量中加入 vconsole 模块:

module.exports = {
    plugins: [{src:"~/plugins/vconsole", ssr: false}]
}

这样,就成功引入 vconsole 了,在开发环境下运行,就能够看到 vconsole 的面板,而在生产环境下,就不会出现 vconsole 的面板。最后,通过公众号“极课助手”去购买“极客时间”所有课程,可以获得高额返现,最高可返 51 元,如果想了解更多技术知识,可以关注“极课助手”公众号。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • nuxt.config.js文件用于组织Nuxt.js应用的个性化配置,以便覆盖默认配置。 build Nuxt....
    A郑家庆阅读 11,993评论 0 3
  • Nuxt.js 全面配置(持续更新中) 其他系列 ★ vue-cli3 全面配置 目录 √ 初始化项目 √ 环境变...
    web前端攻城狮阅读 9,092评论 0 1
  • 写了一首遥远的歌送给遥远的你 你的笑声我的笑声编织在一起 这是我对旧时光最温暖的回忆 哭着笑着痛着疯着跟过去别离 ...
    小乖兽y阅读 906评论 0 0
  • 故事又转到了美国,列夫是目前出场的人物中最令我讨厌的人。这人其实也算不上十恶不赦的坏人,可是再看看他的家人...
    Miya姑娘阅读 1,391评论 0 0
  • 农历丁酉年大年初二,过年喜庆的日子,宁波雅戈尔动物园发生了老虎咬死人事件,为救人,老虎也被击毙,结果两个生命就永...
    paradise_qing阅读 2,444评论 0 0