安装vconsole后，根据环境的判断，将vconsole插件禁用，在vue.config.js中配置。

最新推荐文章于 2025-02-14 10:49:17 发布

原创最新推荐文章于 2025-02-14 10:49:17 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack #npm

本文介绍如何在Vue项目中根据环境变量条件性地启用vConsole插件，通过在vue.config.js中配置vconsole-webpack-plugin插件，实现开发环境下的调试需求，同时确保生产环境不携带该调试工具。

安装vconsole后，根据环境的判断，将vconsole插件禁用，在vue.config.js中配置。

const vConsolePlugin = require('vconsole-webpack-plugin')
module.exports = {
configureWebpack: config => {
    //生产环境去掉vconsole调试器
      let envType = process.env.NODE_ENV != 'production'
    //   console.log('环境为1', process.env.NODE_ENV)
    //   console.log('生产环境为', envType)
      // let envType = true
      let pluginsDev = [
          new vConsolePlugin({
              filter: [],
              enable: envType
          })
      ]
      config.plugins = [...config.plugins, ...pluginsDev]
  }
}

在根目录下配置环境变量文件