Vue 打包优化之 生产环境删除 console 日志


字数:367 阅读时长:1分钟 阅读:85

使用 vue-cli 3.0 (@vue/cli) 脚手架构建的项目,一般在本地开发过程中,会有不少 console 调试信息。如果不处理这些日志信息,默认情况下,即使是构建生产环境的包,这些 console 打印也不会被移除,这显然是不够严谨的。所以就介绍一下怎么来配置根据环境删除 console 日志。

vue remove 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
25
{
"dependencies": {
"axios": "^0.18.1",
"echarts": "^5.3.3",
"element-ui": "^2.15.9",
"v-clipboard": "^2.2.3",
"vue": "^2.7.10",
"vue-router": "^3.6.5",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"compression-webpack-plugin": "^3.0.0",
"html-webpack-externals-plugin": "^3.8.0",
"less": "^3.13.1",
"less-loader": "^4.1.0",
"msw": "^0.47.3",
"msw-tools": "latest",
"babel-plugin-transform-remove-console": "^6.9.4",
"vue-template-compiler": "^2.7.10",
"webpack-bundle-analyzer": "^4.7.0"
}
}

二、配置

  1. 下载 babel-plugin-transform-remove-console
1
npm i -D babel-plugin-transform-remove-console
  1. 配置 babel.config.js
1
2
3
4
5
6
7
8
9
const plugins = []
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console')
}

module.exports = {
presets: ['@vue/app'],
plugins: [...plugins],
}
  1. 完成,npm run build 打包体验。

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-07-28
最后更新: 2022-12-07
本文标题: Vue 打包优化之 生产环境删除 console 日志
本文链接: https://www.tiven.cn/p/73b0f277/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^