Use of vConsole plug-in in Vue3+TS+Vite

        Usually in the process of web application development, we can console.log to output some information, but on the mobile terminal, that is, on the mobile phone, we cannot see the console.log information. At this time, we need Mobile debugging toolvConsole

1. Dependent installation

npm install vconsole

or

yarn add vconsole

or

pnpm add vconsole

After successful installation, you can see the following in package.json: Proof of successful installation

 

2. Import VConsole in the entry file of the Vue project (usually main.js or main.ts) 

import Vconsole from "vconsole";

new Vconsole();

3.Please note that inproduction environment , you should avoid including VConsole in your project. You can use conditional statements to introduce VConsole only under Development and Testing, for example:

import Vconsole from "vconsole";

if (import.meta.env.VITE_NODE_ENV !== "production") {
  // 测试和开发打开，生产不能打开
  new Vconsole();
}

Note: Define the environment variable VITE_NODE_ENV = production in the .env.production configuration file a>, the environment variable must start with VITE_, otherwise it cannot be obtained by using the import.meta.env. environment variable above. As shown below:

That’s it! ! !