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

vConsole 是腾讯公司维护的一个开源项目，用来让前端工程师进行移动端调试，很是好用。可是官方只提供了通常状况下的用法，并无 Nuxt.js 项目中的用法，因此特此记录一下引入方式，而且区分生产环境和开发环境，只在开发环境引入。

首先，经过 npm install vconsole 或 yarn 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 元，若是想了解更多技术知识，能够关注“极课助手”公众号。