脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 打包删除生产环境

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 打包删除生产环境的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • avue-crud多级复杂的动态表头的实现示例

    avue-crud多级复杂的动态表头的实现示例

    Avue.js 是基于现有的element-ui库进行的二次封装，本文主要介绍了avue-crud多级复杂的动态表头，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 用vue2.0实现点击选中active其他选项互斥的效果

    用vue2.0实现点击选中active其他选项互斥的效果

    这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue使用elementUI分页如何实现切换页面时返回页面顶部

    vue使用elementUI分页如何实现切换页面时返回页面顶部

    这篇文章主要介绍了vue使用elementUI分页如何实现切换页面时返回页面顶部，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue父子组件传值不能实时更新的解决方法

    vue父子组件传值不能实时更新的解决方法

    Vue是一个以数据驱动、组件化的前端框架,其中组件化是Vue中较为重要的概念之一,组件之间的通信则成为Vue中较为普遍的需求,下面这篇文章主要给大家介绍了关于vue父子组件传值不能实时更新的解决方法,需要的朋友可以参考下
    2023-05-05
  • vue2中seo时使用vue-meta-info的方法

    vue2中seo时使用vue-meta-info的方法

    这篇文章主要介绍了vue2中seo时使用vue-meta-info,本文通过实例代码给大家详细讲解，文末给大家补充介绍了vue seo管理 vue-meta-info 动态设置meta和title的相关知识，需要的朋友可以参考下
    2022-10-10
  • 全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    这篇文章主要介绍了全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue ECharts简易实现雷达图

    Vue ECharts简易实现雷达图

    这篇文章主要介绍了基于Vue ECharts简易实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • vue style width a href动态拼接问题的解决

    vue style width a href动态拼接问题的解决

    这篇文章主要介绍了vue style width a href动态拼接问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 从0搭建vue3组件库Input组件

    从0搭建vue3组件库Input组件

    这篇文章主要介绍了从0搭建vue3组件库Input组件,每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行实例代码讲解，需要的朋友可以参考下
    2022-11-11
  • vue组件传值的11种方式总结

    vue组件传值的11种方式总结

    这篇文章主要介绍了vue组件传值的11种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01

最新评论