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,
            },
        },
    },
});

总结

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

相关文章

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    VueJs单页应用实现微信网页授权及微信分享功能示例

    本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • 关于Element UI table 顺序拖动方式

    关于Element UI table 顺序拖动方式

    这篇文章主要介绍了关于Element UI table 顺序拖动方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 解决父子组件通信的三种Vue插槽

    解决父子组件通信的三种Vue插槽

    这篇文章主要为大家介绍了Vue插槽解决父子组件通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 如何区分vue中的v-show 与 v-if

    如何区分vue中的v-show 与 v-if

    这篇文章主要介绍了如何区分vue中的v-show 与 v-if ,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-09-09
  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 浅析vue-router实现原理及两种模式

    浅析vue-router实现原理及两种模式

    这篇文章主要介绍了vue-router实现原理及两种模式分析,给大家介绍了vue-router hash模式与history模式不同模式下处理逻辑,需要的朋友可以参考下
    2020-02-02
  • vue单页面应用部署配置详解

    vue单页面应用部署配置详解

    本文主要介绍了vue单页面应用部署配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vuex存取值和映射函数使用说明

    vuex存取值和映射函数使用说明

    这篇文章主要介绍了vuex存取值和映射函数使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue的hover/click事件如何动态改变颜色和背景色

    Vue的hover/click事件如何动态改变颜色和背景色

    这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue中利用three.js实现全景图的完整示例

    vue中利用three.js实现全景图的完整示例

    这篇文章主要给大家介绍了关于vue中利用three.js实现全景图的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论