vite如何build时清除console.log()问题

 更新时间:2024年07月01日 15:29:01   作者:biaobiaogege  
这篇文章主要介绍了vite如何build时清除console.log()问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite如何build时清除console.log()

1、在vue-cli中移除console,下载babel-plugin-transform-remove-console插件,配置 babel.config.js文件

2、vite build清除console.log():vscode项目中,找到vite.config.ts文件:

进行如下配置,主要是build块的配置

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    build:{
      minify: 'terser',
      terserOptions: {
        compress: {
            //生产环境时移除console.log()
            drop_console: true,
            drop_debugger: true,
        },
      },
    },
})

console.log导致内存泄露 打包时自动去掉console.log方法

webpack通过工具:terser

使用前需要先安装一下

  • vue.config.js
const { defineConfig } = require('@vue/cli-servise');
module.exports = defineConfig({
    transpileDependencies:true,
    terser:{
        terserOptions:{
            compress:{
                drop_console:true,
                drop_debugger:true,
                },
             },
            },
           });

然后直接打包就会自动去掉console.log,不影响开发环境

如果是vue3+vite

  • vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins:[vue()],
    build:{
        minify:'terser',
        terserOptions:{
            compress:{
                drop_console:true,
                drop_debugger:true,
            },
        },
    },
});

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈vue实现双向事件绑定v-model的原理

    浅谈vue实现双向事件绑定v-model的原理

    vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素,本文就详细的介绍一下原理,感兴趣的可以了解一下
    2021-08-08
  • vue实现登录页背景粒子特效

    vue实现登录页背景粒子特效

    这篇文章主要为大家详细介绍了vue实现登录页背景粒子特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue 监听input输入事件(oninput)的示例代码支持模糊查询

    vue 监听input输入事件(oninput)的示例代码支持模糊查询

    这篇文章主要介绍了vue 监听input输入事件(oninput)支持模糊查询,比如说表格模糊查询,实现一边输入,一边过滤数据,本文通过示例代码给大家详细讲解,需要的朋友可以参考下
    2023-02-02
  • Vue利用路由钩子token过期后跳转到登录页的实例

    Vue利用路由钩子token过期后跳转到登录页的实例

    下面小编就为大家带来一篇Vue利用路由钩子token过期后跳转到登录页的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • VUE项目中SASS的使用及说明

    VUE项目中SASS的使用及说明

    这篇文章主要介绍了VUE项目中SASS的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue使用NProgress进度条的方法

    Vue使用NProgress进度条的方法

    这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vuex Action的 { commit }的写法教程

    Vuex Action的 { commit }的写法教程

    实践中,我们会经常用到 ES2015 的参数解构来简化代码(特别是我们需要调用commit很多次的时候,{commit} 写法是解构后得到的,这篇文章主要介绍了Vuex Action的{ commit }的写法,需要的朋友可以参考下
    2023-10-10
  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

    基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

    这篇文章主要介绍了基于Vue3实现一个前端埋点上报插件并打包发布到npm,本项目采用pnpm进行Monorepo环境搭建,因为未来这个项目可能会加入更多的工具包,需要的朋友可以参考下
    2022-10-10
  • echarts鼠标覆盖高亮显示节点及关系名称详解

    echarts鼠标覆盖高亮显示节点及关系名称详解

    下面小编就为大家分享一篇echarts鼠标覆盖高亮显示节点及关系名称详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue中如何使用echarts动态渲染数据

    vue中如何使用echarts动态渲染数据

    这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下
    2023-11-11

最新评论