vue-cli2,vue-cli3,vite 生产环境去掉console.log

 更新时间:2024年05月08日 09:39:51   作者:Cola-blog  
console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,本文主要介绍了vue-cli2,vue-cli3,vite 生产环境去掉console.log,具有一定的参考价值,感兴趣的可以了解一下

console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,如果手动删除未免也太累了,我们可以用插件对于具体环境全局处理。

vue-cli2

项目build 下面webpack.prod.config.js 文件中:

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  传递true以放弃对控制台的调用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函数
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
     
    ......
]

vue-cli3

vue.config.js 里配置.

configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },

 如果生产环境的文件中NODE_ENV  自定义,不是production,上述代码或报错,会显示找不到minimizer, 所以生产环境的NODE_ENV 尽量设置为production

生产环境NODE_ENV  自定义或者为production,都可以用下面的代码

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'prod') {
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: true, //注释console
                            drop_debugger: true,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        }
    }
  },

vite

1.build.minify为terser时(terser需要npm单独安装):

npm add -D terser

vite.config.ts  里配置.

import { defineConfig } from 'vite'
export default defineConfig( { 
...
    build : {
        minify : 'terser' ,
        terserOptions : {
            compress : {
                drop_console : true ,
                drop_debugger : true ,
            } ,
        } , 
    } ,
...
} )

2. build.minify默认为esbuild时:

    build : {
        esbuild: {
            drop: mode === 'production' ? ['console', 'debugger'] : []
        },
    }

到此这篇关于vue-cli2,vue-cli3,vite 生产环境去掉console.log的文章就介绍到这了,更多相关vue 生产环境去掉console.log内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue v-for 使用问题整理小结

    vue v-for 使用问题整理小结

    使用v-for指令的时候遇到一个错误问题,具体错误代码在文章给大家列出,对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
    2019-08-08
  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue商品控件与购物车联动效果的实例代码

    Vue商品控件与购物车联动效果的实例代码

    这篇文章主要介绍了Vue商品控件与购物车联动效果的实例代码,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 使用vue-cli3打包dist路径问题修改打包配置

    使用vue-cli3打包dist路径问题修改打包配置

    这篇文章主要介绍了使用vue-cli3打包dist路径问题修改打包配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解Vue.js中引入图片路径的几种方式

    详解Vue.js中引入图片路径的几种方式

    这篇文章主要介绍了Vue.js中引入图片路径的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue如何利用store实现两个平行组件间的传值

    vue如何利用store实现两个平行组件间的传值

    这篇文章主要介绍了vue如何利用store实现两个平行组件间的传值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vite vue3 路由配置@找不到文件的问题及解决

    vite vue3 路由配置@找不到文件的问题及解决

    在Vite项目中配置路由时,可能会遇到文件路径错误导致的加载失败问题,常见的解决办法包括安装路径处理插件、正确设置vite.config.js中的路径别名以及重启项目,通过正确配置,可以确保路由正确加载对应的界面文件,避免路径错误导致的问题
    2024-10-10
  • 详解如何使用 vue-cli 开发多页应用

    详解如何使用 vue-cli 开发多页应用

    本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论