如何在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 的面板。


 评论