Vue.js:部署时自动过滤console.log语句

目录

背景

在开发阶段的时候我们会经常在前端项目里面使用console.log来输出、调试代码,当要将这个项目部署到服务器时,首先我们不想把这些信息暴露给用户,其次这些console.log函数会一定程度上影响代码的执行效率。所以我们在打包发布部署时,需要将这些console.log语句给屏蔽掉。

实现

//1、引入插件(该插件在vue-cli3的时候就已经集成了,我们不需要自己执行npm去install)
const TerserPlugin = require('terser-webpack-plugin')
//2、配置到configureWebpack中(vue.config.js文件)
configureWebpack: (config) => {
  let optimization = {
    minimizer: [
      new TerserPlugin({
       terserOptions: {
         ecma: undefined,
         warnings: false,
         parse: {},
         compress: {
           drop_console: true,
           drop_debugger: false,
           pure_funcs: ['console.log'] // 移除console
         }
       },
     })
    ]
  }
}
App.vue:246 App Error: ReferenceError: getQxdm is not defined at index.vue:1062:3 at callWithErrorHandling (vue.runtime.esm.js:1381:19) at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17) at hook.__weh.hook.__weh (vue.runtime.esm.js:4141:19) at invokeArrayFns (shared.esm-bundler.js:78:11) at uni-h5.es.js:16487:21 at hook.__wdc.hook.__wdc (vue.runtime.esm.js:4061:12) at callWithErrorHandling (vue.runtime.esm.js:1381:19) at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17) at hook.__weh.hook.__weh (vue.runtime.esm.js:4141:19) onError @ App.vue:246 callWithErrorHandling @ vue.runtime.esm.js:1381 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ uni-shared.es.js:413 invokeHook @ uni-h5.es.js:1192 errorHandler @ uni-h5.es.js:16146 callWithErrorHandling @ vue.runtime.esm.js:1381 handleError @ vue.runtime.esm.js:1421 callWithErrorHandling @ vue.runtime.esm.js:1383 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ shared.esm-bundler.js:78 (anonymous) @ uni-h5.es.js:16487 hook.__wdc.hook.__wdc @ vue.runtime.esm.js:4061 callWithErrorHandling @ vue.runtime.esm.js:1381 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ shared.esm-bundler.js:78 sharedContext.activate @ vue.runtime.esm.js:3882 processComponent @ vue.runtime.esm.js:7176 patch @ vue.runtime.esm.js:6650 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 updateComponent @ vue.runtime.esm.js:7261 processComponent @ vue.runtime.esm.js:7195 patch @ vue.runtime.esm.js:6650 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 updateComponent @ vue.runtime.esm.js:7261 processComponent @ vue.runtime.esm.js:7195 patch @ vue.runtime.esm.js:6650 patchKeyedChildren @ vue.runtime.esm.js:7606 patchChildren @ vue.runtime.esm.js:7520 patchElement @ vue.runtime.esm.js:6945 processElement @ vue.runtime.esm.js:6781 patch @ vue.runtime.esm.js:6638 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 callWithErrorHandling @ vue.runtime.esm.js:1381 flushJobs @ vue.runtime.esm.js:1585 Promise.then queueFlush @ vue.runtime.esm.js:1494 queueJob @ vue.runtime.esm.js:1488 scheduler @ vue.runtime.esm.js:3179 resetScheduling @ vue.runtime.esm.js:236 triggerEffects @ vue.runtime.esm.js:280 triggerRefValue @ vue.runtime.esm.js:1033 set value @ vue.runtime.esm.js:1078 finalizeNavigation @ vue-router.mjs?v=4ebd0f23:2392 (anonymous) @ vue-router.mjs?v=4ebd0f23:2447 Promise.then (anonymous) @ vue-router.mjs?v=4ebd0f23:2446 (anonymous) @ vue-router.mjs?v=4ebd0f23:281 popStateHandler @ vue-router.mjs?v=4ebd0f23:280 App.vue:247 错误详情: {}
11-28
App.vue:246 App Error: ReferenceError: getQxdm is not defined at index.vue?t=1764235487395:891:3 at callWithErrorHandling (vue.runtime.esm.js:1381:19) at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17) at hook.__weh.hook.__weh (vue.runtime.esm.js:4141:19) at invokeArrayFns (shared.esm-bundler.js:78:11) at uni-h5.es.js:16487:21 at hook.__wdc.hook.__wdc (vue.runtime.esm.js:4061:12) at callWithErrorHandling (vue.runtime.esm.js:1381:19) at callWithAsyncErrorHandling (vue.runtime.esm.js:1388:17) at hook.__weh.hook.__weh (vue.runtime.esm.js:4141:19) onError @ App.vue:246 callWithErrorHandling @ vue.runtime.esm.js:1381 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ uni-shared.es.js:413 invokeHook @ uni-h5.es.js:1192 errorHandler @ uni-h5.es.js:16146 callWithErrorHandling @ vue.runtime.esm.js:1381 handleError @ vue.runtime.esm.js:1421 callWithErrorHandling @ vue.runtime.esm.js:1383 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ shared.esm-bundler.js:78 (anonymous) @ uni-h5.es.js:16487 hook.__wdc.hook.__wdc @ vue.runtime.esm.js:4061 callWithErrorHandling @ vue.runtime.esm.js:1381 callWithAsyncErrorHandling @ vue.runtime.esm.js:1388 hook.__weh.hook.__weh @ vue.runtime.esm.js:4141 invokeArrayFns @ shared.esm-bundler.js:78 sharedContext.activate @ vue.runtime.esm.js:3882 processComponent @ vue.runtime.esm.js:7176 patch @ vue.runtime.esm.js:6650 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 updateComponent @ vue.runtime.esm.js:7261 processComponent @ vue.runtime.esm.js:7195 patch @ vue.runtime.esm.js:6650 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 updateComponent @ vue.runtime.esm.js:7261 processComponent @ vue.runtime.esm.js:7195 patch @ vue.runtime.esm.js:6650 patchKeyedChildren @ vue.runtime.esm.js:7606 patchChildren @ vue.runtime.esm.js:7520 patchElement @ vue.runtime.esm.js:6945 processElement @ vue.runtime.esm.js:6781 patch @ vue.runtime.esm.js:6638 componentUpdateFn @ vue.runtime.esm.js:7409 run @ vue.runtime.esm.js:153 instance.update @ vue.runtime.esm.js:7453 callWithErrorHandling @ vue.runtime.esm.js:1381 flushJobs @ vue.runtime.esm.js:1585 Promise.then queueFlush @ vue.runtime.esm.js:1494 queueJob @ vue.runtime.esm.js:1488 scheduler @ vue.runtime.esm.js:3179 resetScheduling @ vue.runtime.esm.js:236 triggerEffects @ vue.runtime.esm.js:280 triggerRefValue @ vue.runtime.esm.js:1033 set value @ vue.runtime.esm.js:1078 finalizeNavigation @ vue-router.mjs?v=4ebd0f23:2392 (anonymous) @ vue-router.mjs?v=4ebd0f23:2447 Promise.then (anonymous) @ vue-router.mjs?v=4ebd0f23:2446 (anonymous) @ vue-router.mjs?v=4ebd0f23:281 popStateHandler @ vue-router.mjs?v=4ebd0f23:280 App.vue:247 错误详情: {}
最新发布
11-28
mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 invoker @ vue.runtime.esm.js:5589 mp.esm.js:481 切换状态: true mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: false mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: true mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 mp.esm.js:481 切换状态: false mp.esm.js:481 [Vue warn]: Property "loginBtnColor" was accessed during render but is not defined on instance. at <App > (anonymous) @ mp.esm.js:481 warn$1 @ vue.runtime.esm.js:1251 get @ vue.runtime.esm.js:2627 _sfc_render @ login.vue:71 renderComponentRoot @ vue.runtime.esm.js:4973 componentUpdateFn @ vue.runtime.esm.js:5100 run @ vue.runtime.esm.js:180 instance.update @ vue.runtime.esm.js:5124 callWithErrorHandling @ vue.runtime.esm.js:1356 flushJobs @ vue.runtime.esm.js:1563 Promise.then (async) queueFlush @ vue.runtime.esm.js:1472 queueJob @ vue.runtime.esm.js:1466 (anonymous) @ vue.runtime.esm.js:5118 resetScheduling @ vue.runtime.esm.js:263 trigger @ vue.runtime.esm.js:403 set @ vue.runtime.esm.js:524 set @ vue.runtime.esm.js:2642 togglePassword @ login.vue:55 (anonymous) @ login.vue:71 callWithErrorHandling @ vue.runtime.esm.js:1356 callWithAsyncErrorHandling @ vue.runtime.esm.js:1363 invoke @ vue.runtime.esm.js:5577 setTimeout (async) invoker @ vue.runtime.esm.js:5586 [worker] reportRealtimeAction:fail not support
08-09
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Oruizn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值