资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue-cli 3.x 移除console总结

vue-cli 3.x 移除console总结

jsbintask / 1413人阅读

摘要：网上找了很多的配置，很多已经不适用了，把采坑的经历记录下来，供参考。一使用插件配置如下移除没成功报错如下二配置参考优化实践删除和配置最终还是没有成功，报错如下三使用插件参考安装依赖库配置如下生产环境移除总结该方案成功了

网上找了很多vue-cli 3.x的配置，很多已经不适用了，把采坑的经历记录下来，供参考。

一、使用 uglifyjs-webpack-plugin 插件 
</>复制代码 
  1. 配置如下:
</>复制代码 
  1. // vue.config.js
  2. const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
  3. module.exports = {
  4.     configureWebpack: {
  5.         optimization: {
  6.           minimizer: [
  7.             new UglifyJsPlugin({
  8.               uglifyOptions: {
  9.                 compress: {
  10.                   warnings: false,
  11.                   drop_console: true,//console
  12.                   drop_debugger: false,
  13.                   pure_funcs: ["console.log"]//移除console
  14.                 }
  15.               }
  16.             })
  17.           ]
  18.         }
  19.   },
  20. }
</>复制代码 
  1. 没成功报错如下
</>复制代码 
  1. $ vue-cli-service build
  2. ⠋  Building for production...
  3.  ERROR  Failed to compile with 5 errors                                                                                                                                                                                     11:19:57 AM
  4.  error  
  5. static/js/app.2cd76486.js from UglifyJs
  6. Unexpected token: punc «(» [static/js/app.2cd76486.js:1,23125]
  7.  error  
  8. static/js/chunk-66db1624.14c7d3b2.js from UglifyJs
  9. Unexpected token: punc «(» [static/js/chunk-66db1624.14c7d3b2.js:1,733956]
  10.  error  
  11. static/js/exception_403.5d780122.js from UglifyJs
  12. Unexpected token: punc «(» [static/js/exception_403.5d780122.js:1,281]
  13.  error  
  14. static/js/exception_404.3457fc52.js from UglifyJs
  15. Unexpected token: punc «(» [static/js/exception_404.3457fc52.js:1,281]
  16.  error  
  17. static/js/exception_500.94c7c527.js from UglifyJs
  18. Unexpected token: punc «(» [static/js/exception_500.94c7c527.js:1,283]
  19.  ERROR  Build failed with errors.
  20. error Command failed with exit code 1.
二、配置optimization.minimizer 
</>复制代码 
  1. 参考 vuecli3+webpack4优化实践（删除console.log和配置dllPlugin）
</>复制代码 
  1. // vue.config.js
  2. module.exports = {
  3.     chainWebpack: (config) => {
  4.         if (process.env.NODE_ENV === "production") {
  5.           config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
  6.           config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  7.           config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
  8.           config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ["console.log"]
  9.         }
  10.     }
  11. }
</>复制代码 
  1. 最终还是没有成功，报错如下：
</>复制代码 
  1. $ vue-cli-service build
  2. ⠋  Building for production... ERROR  TypeError: Cannot read property "options" of undefined
  3. TypeError: Cannot read property "options" of undefined
三、使用babel-plugin-transform-remove-console插件 
</>复制代码 
  1. 参考 https://forum.vuejs.org/t/rem...
</>复制代码 
  1. # 安装依赖库
  2. $ npm install babel-plugin-transform-remove-console --save-dev
  3. # or
  4. $  yarn add babel-plugin-transform-remove-console --dev
</>复制代码 
  1. 【babel.config.js】配置如下
</>复制代码 
  1. const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
  2. // 生产环境移除console
  3. if(process.env.NODE_ENV === "production") {
  4.   plugins.push("transform-remove-console")
  5. }
  6. module.exports = {
  7.   plugins: plugins,
  8.   presets: [
  9.     [
  10.       "@vue/app", {
  11.         modules: false,
  12.         targets: {
  13.           browsers: ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4", "iOS >= 8"]
  14.         },
  15.         useBuiltIns: "entry",
  16.       }
  17.     ]
  18.   ]
  19. }
</>复制代码 
  1. 总结该方案成功了
GPU云服务器 云服务器 vue-cli vue-cli3 console console.log

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104184.html

相关文章

  • vue cli 3.x 生产环境去除console采坑记

    摘要：移除总结使用插件配置如下移除没成功报错如下配置参考优化实践删除和配置最终还是没有成功，报错如下使用插件安装依赖库配置如下生产环境移除总结该方案成功了 vue-cli 3.x 移除console总结 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...

    kgbook 评论0 收藏0

  • vue-cli项目优化，缩短首屏加载时间

    摘要：主要是首屏加载太慢。文件按需加载如果没有这个设置，项目首屏加载时会加载整个网站所有的文件，所以将文件拆开，点击某个页面时再加载该页面的是一个很好的优化方法。在中，不要使用的方法引入组件，使用。使用插件，将的值改成。 主要是首屏加载太慢。 大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 ...

    lufficc 评论0 收藏0

  • vue-cli项目优化，缩短首屏加载时间

    摘要：主要是首屏加载太慢。文件按需加载如果没有这个设置，项目首屏加载时会加载整个网站所有的文件，所以将文件拆开，点击某个页面时再加载该页面的是一个很好的优化方法。在中，不要使用的方法引入组件，使用。使用插件，将的值改成。 主要是首屏加载太慢。 大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 ...

    hedzr 评论0 收藏0

  • vue-cli中配置webpack系列文章八 ------ 工程常用配置

    摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。 一 webpack.base.conf.js 1. entry 为入口文件 1.1 在此可以绑定 babel 垫片 处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置 2. resol...

    netScorpion 评论0 收藏0

发表评论

登陆后可评论

0条评论

jsbintask

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<