vue-cli2，vue-cli3，vite 生产环境去掉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.logif (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.logif (process.env.NODE_ENV === 'prod') {optimization: {minimizer: [new UglifyJsPlugin({uglifyOptions: {compress: {// warnings: false,drop_console: true, //注释consoledrop_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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---