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性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue resource三种请求格式和万能测试地址

    Vue resource三种请求格式和万能测试地址

    这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • ant design vue导航菜单与路由配置操作

    ant design vue导航菜单与路由配置操作

    这篇文章主要介绍了ant design vue导航菜单与路由配置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue调用PC摄像头实现拍照功能

    Vue调用PC摄像头实现拍照功能

    这篇文章主要为大家详细介绍了Vue调用PC摄像头实现拍照功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue不同项目之间传递、接收参数问题

    Vue不同项目之间传递、接收参数问题

    这篇文章主要介绍了Vue不同项目之间传递、接收参数问题,主要针对是登录操作,我们为了完成SSO(Single Sign On)的效果,认证和授权在UC完成,用户发起资源请求,服务网关会进行过滤,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 深入解析Vue 组件命名那些事

    深入解析Vue 组件命名那些事

    本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    这篇文章主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料,文中详细介绍两者的共同点和区别,通过图文介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • vue实现将一个数组内的相同数据进行合并

    vue实现将一个数组内的相同数据进行合并

    今天小编就为大家分享一篇vue实现将一个数组内的相同数据进行合并,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Webpack和Vite的区别小结

    Webpack和Vite的区别小结

    本文主要介绍了Webpack和Vite的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    详解如何搭建mpvue框架搭配vant组件库的小程序项目

    这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论