console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,如果手动删除未免也太累了,我们可以用插件对于具体环境全局处理。
vue-cli2
项目build 下面webpack.prod.config.js 文件中:
plugins: [ new webpack.DefinePlugin({ 'process.env': env }), new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, //drop_console 传递true以放弃对控制台的调用。*功能 drop_console: true, // pure_funces 禁用console.log函数 pure_funcs: ['console.log'] } }, sourceMap: config.build.productionSourceMap, parallel: true }), ...... ]
vue-cli3
vue.config.js 里配置.
configureWebpack: config => { //生产环境取消 console.log if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } },
如果生产环境的文件中NODE_ENV 自定义,不是production,上述代码或报错,会显示找不到minimizer, 所以生产环境的NODE_ENV 尽量设置为production
生产环境NODE_ENV 自定义或者为production,都可以用下面的代码
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); configureWebpack: config => { //生产环境取消 console.log if (process.env.NODE_ENV === 'prod') { optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { // warnings: false, drop_console: true, //注释console drop_debugger: true, pure_funcs: ['console.log'] //移除console } } }) ] } } },
vite
1.build.minify为terser时(terser需要npm单独安装):
npm add -D terser
vite.config.ts 里配置.
import { defineConfig } from 'vite' export default defineConfig( { ... build : { minify : 'terser' , terserOptions : { compress : { drop_console : true , drop_debugger : true , } , } , } , ... } )
2. build.minify默认为esbuild时:
build : { esbuild: { drop: mode === 'production' ? ['console', 'debugger'] : [] }, }
到此这篇关于vue-cli2,vue-cli3,vite 生产环境去掉console.log的文章就介绍到这了,更多相关vue 生产环境去掉console.log内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » vue-cli2,vue-cli3,vite 生产环境去掉console.log
发表评论 取消回复