vite项目初始化之~console控制台

插件推荐： xuwu(虚无)模板助手

介绍

本文介绍的是xuwu模版助手中的 consoleLog控制台 扩展环境变量，这个模块相关代码，还会陆续更新相关的其他功能，比如ajax请求模版，生产环境去掉console，eslint+commit代码时统一风格，，移动端适配，ElementUi，VantUi，AntDesignUi的按需引入等。

本文介绍的是移动端调试工具之vconsole

依赖安装

"devDependencies": {
    "vconsole": "^3.3.4"
  }

环境变量引入

consoleLog控制台仅仅需要在非生产环境使用，所以需要判断当前的环境。具体请看这篇文章: vite项目初始化之~环境变量

修改main.js文件

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

import VConsole from 'vconsole'
console.log(import.meta.env)
if (import.meta.env.VITE_API_ENV !== 'prod') {
  // @ts-ignore
  app.use(new VConsole())
}
app.mount('#app')

启动后可以显示出来了。