如何在Nuxtjs项目中使用vConsole

50次阅读

共计 780 个字符,预计需要花费 2 分钟才能阅读完成。

vConsole 是腾讯公司维护的一个开源项目,用来让前端工程师进行移动端调试,非常好用。但是官方只提供了一般情况下的用法,并没有 Nuxt.js 项目中的用法,所以特此记录一下引入方式,并且区分生产环境和开发环境,只在开发环境引入。
首先,通过 npm install vconsoleyarn add vconsole 安装 vconsole,安装完成后,项目的 package.json 文件的 dependencies 中就会加入 vconnsole。
然后,在项目的 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 元,如果想了解更多技术知识,可以关注“极课助手”公众号。

正文完
 0