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

 更新时间:2023年06月13日 11:14:35   作者:天問  
这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

vue-cli 3.0使用

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

vue remove console

一、项目依赖

{
  "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"
  }
}

二、配置

  • 下载 babel-plugin-transform-remove-console
npm i -D babel-plugin-transform-remove-console
  • 配置 babel.config.js
const plugins = []
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: ['@vue/app'],
  plugins: [...plugins],
}
  • 完成,npm run build 打包体验。

以上就是Vue打包优化之生产环境删除console日志配置的详细内容,更多关于Vue 打包删除生产环境的资料请关注脚本之家其它相关文章!

相关文章

  • vue中图片加载不出来的问题及解决

    vue中图片加载不出来的问题及解决

    这篇文章主要介绍了vue中图片加载不出来的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue-star评星组件开发实例

    vue-star评星组件开发实例

    下面小编就为大家分享一篇vue-star评星组件开发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js 实现输入框动态添加功能

    vue.js 实现输入框动态添加功能

    这篇文章主要介绍了vue.js 实现输入框动态添加功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue使用Print.js打印页面样式不出现的解决

    vue使用Print.js打印页面样式不出现的解决

    这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    Vue的移动端多图上传插件vue-easy-uploader的示例代码

    这篇文章主要介绍了Vue的移动端多图上传插件vue-easy-uploader的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue中使用better-scroll实现轮播图组件

    Vue中使用better-scroll实现轮播图组件

    better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。这篇文章主要介绍了Vue中使用better-scroll实现轮播图组件的实例代码,需要的朋友可以参考下
    2020-03-03
  • 专业级Vue 多级菜单设计

    专业级Vue 多级菜单设计

    这篇文章主要为大家介绍了专业级的Vue 多级菜单设计实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue中引用JSON数据的方法小结

    Vue中引用JSON数据的方法小结

    在现代Web开发中,JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,Vue.js作为一个流行的前端框架,支持多种方式引入和处理JSON数据,本文将详细介绍几种在Vue中引用JSON数据的方法,需要的朋友可以参考下
    2024-10-10
  • vue中的非父子间的通讯问题简单的实例代码

    vue中的非父子间的通讯问题简单的实例代码

    这篇文章主要介绍了vue中的非父子间的通讯问题简单的实例代码,需要的朋友可以参考下
    2017-07-07
  • Vue3实现计算属性的代码详解

    Vue3实现计算属性的代码详解

    计算属性对于前端开发来说算是经常使用的一个能力了,本文将从代码层面来给大家介绍下Vue3是如何实现计算属性的,需要的朋友可以参考下
    2023-07-07

最新评论