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