如何在Nuxt2项目中使用vConsole进行调试

前言：
vConsole是一个方便让前端工程师进行移动端调试的工具。官方只提供了通常的用法，好像没有Nuxt.js项目中的用法，在此记录一下，而且可以区分生产环境和开发环境。

一、安装

首先，经过npm install vconsole或yarn add vconsole安装vconsole，安装完成后，项目的package.json文件的dependencies中就会加入vconsole。

npm install vconsole

二、添加vconsole.js文件

随后，在项目的plugins文件夹下，新建vconsole.js文件（plugins文件夹，用来存放第三方插件，比如：element-ui、vconsole等），文件内容如下：（ps:在vue项目中，一般添加在main.js中，这个和vue项目的结构不太一样）

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

在vconsole.js文件中，可以通过全局变量process.env.NODE_ENV来判断当前环境。若是是开发环境 development，那么就正常建立 VConsole 的实例，而后引入，若是是其余环境，就不建立实例。这个条件根据项目可自行决定。

三、添加vconsole模块

最后，在nuxt.config.js文件的plugins变量中，加入vconsole模块：

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

好了，这样就成功引入vconsole了，在你所选择的环境下运行，就可以看到vconsole的面板了。

参考博客：

如何在Nuxt.js项目中使用vConsole http://www.javashuo.com/article/p-krohyfgo-dp.html