Vue 项目中如何在打包时清除 console 和 debugger
# vue-cli
与vue-cli2.0使用了uglifyjs-webpack-plugin
或 babel-plugin-transform-remove-console
插件进行优化配置不同,vue-cli3.0 在打包过程中就使用了terser-webpack-plugin
插件进行优化。
# vue-cli2.0
1,安装:babel-plugin-transform-remove-console
我们在开发过程中,肯定会用到console打印信息。但是呢,我们上线就要把console这些打印的信息给去掉吧,那时我们项目那么多打印,难道要一个个去掉吗,显然是不可能的;以下是解决方法
npm install babel-plugin-transform-remove-console --save-dev
1
2,修改 babel.config.js
(如果没有自己创建)
let plugins = [];
if (process.env.NODE_ENV === "production") { // todo if判断是否打包,打包环境下控制台去掉console.log,也可去掉if判断,整个项目不会出现console.log(不建议)
plugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: plugins
};
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# vue-cli3.0
在 vue.config.js
中的 configureWebpack
选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置,vue.config.js
配置如下:
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
注意
terser-webpack-plugin是@vue/cli-service的依赖包之一,所以不需要再次安装;
# vite
在vite中已经内置了移除console的设置了,只需要配置一下就行了
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
minify: 'terser',
terserOptions: {
compress: {
/*
* command 用来判断环境
*/
compress: {
//warnings: false,
drop_console: command !== 'serve',
drop_debugger: command !== 'serve',
//pure_funcs:['console.log'] // 移除console
}
},
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
注意
注:vite2.6.x需要配置 “build.minify” 为 “terser”
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13