快捷導(dǎo)航

vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log

更新時間：2024年05月08日 09:39:51 作者：Cola-blog

console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價值,感興趣的可以了解一下

vue-cli2

項(xiàng)目build 下面webpack.prod.config.js 文件中:

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  傳遞true以放棄對控制臺的調(diào)用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函數(shù)
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
     
    ......
]

vue-cli3

vue.config.js 里配置.

configureWebpack: config => {
    //生產(chǎn)環(huán)境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },

如果生產(chǎn)環(huán)境的文件中NODE_ENV 自定義，不是production，上述代碼或報(bào)錯，會顯示找不到minimizer，所以生產(chǎn)環(huán)境的NODE_ENV 盡量設(shè)置為production

生產(chǎn)環(huán)境NODE_ENV 自定義或者為production，都可以用下面的代碼

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
configureWebpack: config => {
    //生產(chǎn)環(huán)境取消 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單獨(dú)安裝）：

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默認(rèn)為esbuild時：

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

到此這篇關(guān)于vue-cli2,vue-cli3,vite 生產(chǎn)環(huán)境去掉console.log的文章就介紹到這了,更多相關(guān)vue 生產(chǎn)環(huán)境去掉console.log內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: