How to use vConsole for debugging in Nuxt2 project

Preface:
vConsole is a convenient tool for front-end engineers to debug on the mobile side. The official only provides the usual usage. It seems that there is no usage in the Nuxt.js project. Record it here, and it can distinguish between the production environment and the development environment.

1. Installation

First, pass npm install vconsoleor yarn add vconsoleinstall vconsole. After the installation is complete, vconsole will be added to the dependencies of the project's package.json file.

npm install vconsole

2. Add the vconsole.js file

Then, under the project pluginsfolder, create vconsole.jsa new file (plugins folder, used to store third-party plug-ins, such as: element-ui, vconsole, etc.), the content of the file is as follows: (ps: in the vue project, generally added in main. js, this is not the same as the structure of the vue project)

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

In the vconsole.js file, the current environment can be judged by the global variable process.env.NODE_ENV. If it is the development environment, then create an instance of VConsole normally, and then import it. If it is in other environments, no instance will be created. This condition can be determined by the project itself.

3. Add vconsole module

Finally, in nuxt.config.jsthe plugins variable of the file, add vconsole模块:

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

Well, this successfully introduces vconsole, run it in the environment you choose, and you can see the panel of vconsole.

Reference blog:

How to use vConsole in Nuxt.js project http://www.javashuo.com/article/p-krohyfgo-dp.html