vue项目上线打包移除console.log

开发阶段&＃xff0c;我们会编写大量的 console 语句用于测试

使用 build 命令打包时&＃xff0c;会作为警告提出&＃xff0c;因为上线之后&＃xff0c;这些 console 语句是没有任何作用的&＃xff0c;所以警告你应该移除

挨个文件手动删除的方法&＃xff0c;会有两个问题

耗时耗力

代码中其实还是需要console的&＃xff0c;只是打包后&＃xff0c;希望生成的文件中不包含而已

1. babel-plugin-transform-remove-console
   比较流行的解决办法是使用 babel 的一个插件&＃xff0c;因为webpack 打包时会使用 babel 进行代码降级&＃xff0c;所以babel 插件可以在打包过程中&＃xff0c;将 console 移除

npm 中搜索 babel-plugin-transform-remove-console&＃xff0c;按照说明操作即可

1、安装

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


2、配置

在项目根目录下的 babel.config 文件中加入如下代码

3、问题

使用 babel-plugin-transform-remove-console 插件会有一个问题&＃xff08;使用terser-webpack-plugin没有此问题&＃xff09;&＃xff0c;就是一旦安装并配置好后&＃xff0c;无论运行

npm run build

还是运行

npm run serve


都会删除 console&＃xff0c;语句

因为我们开发阶段都是使用 serve 命令启动的&＃xff0c;所以导致开发阶段我们所有的console 语句都消失了

解决办法就是明确告诉此插件当前是开发环境还是生产环境

修改 babel.config.js 中的代码


const prodPlugins &＃61; []
if (process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;) {prodPlugins.push(&＃39;transform-remove-console&＃39;)
}module.exports &＃61; {presets: [&＃39;&＃64;vue/cli-plugin-babel/preset&＃39;],plugins: [...prodPlugins]
}

此时&＃xff0c;只有在生产环境下&＃xff0c;才会去除 console