【vue】 将Vue2中的console.log()调试信息移除

前言

最近写了个vue2项目自己部署上线，上线后发现控制台居然有log，如果让别有用心的人看见了一下重要数据是万万不能的。所以上网百度解决

参考文章：将Vue2中的console.log()调试信息移除

安装依赖

npm install babel-plugin-transform-remove-console --save-dev

配置babel.config.js

在文件中加入下面配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [ 
  // 加入以下内容，引入插件。
   'transform-remove-console'
  ]
}

注意：添加完后，因为是配置文件所以要重新启动项目，npm run dev。这个时候打包再部署上线控制台就没有log了，但是在本地跑项目log也没了，所以接着往下看。。。。

配置只在线上移除log

配置babel.config.js文件

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [ // 原有的默认配置
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: prodPlugins
}

在 npm run build 之后生成的dist/中的文件将自动移除console.log()的输出语句。一般用于发布项目时使用。（即这个时候本地log正常，部署上线的控制台没有log）

下班~