Vue-cli: 如何在vue.config.js中配置vue-cli3.0打包之后不显示console

Created on 6 Dec 2018  ·  27Comments  ·  Source: vuejs/vue-cli

Version

3.0.5

Node and OS info

yarn

Steps to reproduce

如何在vue.config.js中配置vue-cli3.0打包之后不显示console

What is expected?

如何在vue.config.js中配置vue-cli3.0打包之后不显示console

What is actually happening?

暂无

picture lixueninggg

Most helpful comment

翻了不少答案，最后找到Vue Cli4可以这样做，会保留Vue CLI原有的terser配置不被覆盖：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

文档：https://cli.vuejs.org/migrating-from-v3/#vue-cli-service

picture duola8789 on 10 Jan 2020
👍6

All 27 comments

不是很懂你的需求。如果是不需要在控制台输出信息的话，执行命令时自行重定向标准输出流就行了。

yarn build 1&>/dev/null

另外 GitHub issues 是用来处理 Bug 报告和特性请求的，这个 issue 不是 bug，类似的提问可以到论坛 提。

sodatea picture sodatea on 6 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  }
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

sodatea picture sodatea on 6 Dec 2018
👍3 👎1

好的谢谢

lixueninggg picture lixueninggg on 6 Dec 2018 
const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

可以解决

lixueninggg picture lixueninggg on 6 Dec 2018

想要只在生产环境设置，只能这样吗?
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress['drop_console'] = true } }

sunlei4076 picture sunlei4076 on 13 Dec 2018

你用的是vue-cli是什么版本的@sunlei4076

lixueninggg picture lixueninggg on 13 Dec 2018

/ vue -V 3.0.5

sunlei4076 picture sunlei4076 on 13 Dec 2018

/ vue -V 3.0.5

那你可以在vue.config.js直接使用这段代码

const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

打包的时候会关闭,本地运行的时候不会影响

lixueninggg picture lixueninggg on 13 Dec 2018

想要只在生产环境设置，只能这样吗?
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress['drop_console'] = true } }

配置多个属性不是太方便，能用这种json形式吗的设置吗 { drop_console: true }

bookldk picture bookldk on 14 Dec 2018

想要只在生产环境设置，只能这样吗?
configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress['drop_console'] = true } }

配置多个属性不是太方便，能用这种json形式吗的设置吗 { drop_console: true }

其实我感觉不用纠结这个开关的写法,我感觉写成json这种的比较直观

lixueninggg picture lixueninggg on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

bookldk picture bookldk on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

如果你是用的是vue-cli3.0+,你需要安装一个terser-webpack-plugin的npm包,在vue.config.js引用就好了

lixueninggg picture lixueninggg on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

如果你是用的是vue-cli3.0+,你需要安装一个terser-webpack-plugin的npm包,在vue.config.js引用就好了

我是说怎么加上这句判断： if (process.env.NODE_ENV === 'production')

bookldk picture bookldk on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

如果你是用的是vue-cli3.0+,你需要安装一个terser-webpack-plugin的npm包,在vue.config.js引用就好了

我是说怎么加上这句判断： if (process.env.NODE_ENV === 'production')

你尝试过我说的方法吗? if (process.env.NODE_ENV === 'production'){}这个判断语句你不会加?你js怎么写的,而且请不要没尝试过解决方案直接问,可以吗

lixueninggg picture lixueninggg on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

如果你是用的是vue-cli3.0+,你需要安装一个terser-webpack-plugin的npm包,在vue.config.js引用就好了

我是说怎么加上这句判断： if (process.env.NODE_ENV === 'production')

你尝试过我说的方法吗? if (process.env.NODE_ENV === 'production'){}这个判断语句你不会加?你js怎么写的,而且请不要没尝试过解决方案直接问,可以吗

看你你的写法跟他的写法的区别，他是直接返回的的一个json，if语句怎么加。。

bookldk picture bookldk on 14 Dec 2018

哦你说的是打包后去掉 console 语句。
这样的话改 webpack 里 optimization.minimizer

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

（如果用 chainWebpack 改配置的话注意我们考虑到兼容性的原因还没有升级 webpack-chain v5，v4 和 v5 唯一的区别就是改 minimizer 的方法，参见 v4 的文档 https://github.com/neutrinojs/webpack-chain/tree/v4）

这种配置，怎么去设置只在生产环境生效

如果你是用的是vue-cli3.0+,你需要安装一个terser-webpack-plugin的npm包,在vue.config.js引用就好了

我是说怎么加上这句判断： if (process.env.NODE_ENV === 'production')

你尝试过我说的方法吗? if (process.env.NODE_ENV === 'production'){}这个判断语句你不会加?你js怎么写的,而且请不要没尝试过解决方案直接问,可以吗

看你你的写法跟他的写法的区别，他是直接返回的的一个json，if语句怎么加。。

三元运算符不行吗

lixueninggg picture lixueninggg on 14 Dec 2018

试试这样

  configureWebpack (config) {
    // 生产环境去掉console, 注意console里面不要放函数调用, 也会被删掉
    if (process.env.NODE_ENV === 'production') {
      const terserWebpackPlugin = config.optimization.minimizer[0]
      const terserOptions = terserWebpackPlugin.options.terserOptions
      terserOptions.compress["drop_console"] = true
    }
  }
kind-hearted picture kind-hearted on 22 Dec 2018
😄1

@sodatea 这种写法会不会覆盖脚手架原先的配置？我的做法是直接定位
node_modules/@vue/cli-service/lib/config/terserOptions.js加入

drop_console: process.env.NODE_ENV === 'production' ? true : false,
drop_debugger: process.env.NODE_ENV === 'production' ? true : false

不知道有没有不改源码配置的方法。

wQueryLoveMm picture wQueryLoveMm on 25 Feb 2019

@wQueryLoveMm 会覆盖

@sodatea 这种写法会不会覆盖脚手架原先的配置？我的做法是直接定位
node_modules/@vue/cli-service/lib/config/terserOptions.js加入

drop_console: process.env.NODE_ENV === 'production' ? true : false,
drop_debugger: process.env.NODE_ENV === 'production' ? true : false

不知道有没有不改源码配置的方法。

我试了会覆盖

zuibunan picture zuibunan on 2 Mar 2019

试试这样

  configureWebpack (config) {
    // 生产环境去掉console, 注意console里面不要放函数调用, 也会被删掉
    if (process.env.NODE_ENV === 'production') {
      const terserWebpackPlugin = config.optimization.minimizer[0]
      const terserOptions = terserWebpackPlugin.options.terserOptions
      terserOptions.compress["drop_console"] = true
    }
  }

我试了会报 TypeError: Cannot read property 'options' of undefined
config.optimization.minimizer 是一个function，不是对象

zuibunan picture zuibunan on 2 Mar 2019

试试这样

  configureWebpack (config) {
    // 生产环境去掉console, 注意console里面不要放函数调用, 也会被删掉
    if (process.env.NODE_ENV === 'production') {
      const terserWebpackPlugin = config.optimization.minimizer[0]
      const terserOptions = terserWebpackPlugin.options.terserOptions
      terserOptions.compress["drop_console"] = true
    }
  }

我试了会报 TypeError: Cannot read property 'options' of undefined
config.optimization.minimizer 是一个function，不是对象

// 这样设置过吗
const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}
lixueninggg picture lixueninggg on 2 Mar 2019

试试这样

  configureWebpack (config) {
    // 生产环境去掉console, 注意console里面不要放函数调用, 也会被删掉
    if (process.env.NODE_ENV === 'production') {
      const terserWebpackPlugin = config.optimization.minimizer[0]
      const terserOptions = terserWebpackPlugin.options.terserOptions
      terserOptions.compress["drop_console"] = true
    }
  }

我试了会报 TypeError: Cannot read property 'options' of undefined
config.optimization.minimizer 是一个function，不是对象

// 这样设置过吗
const TerserPlugin = require('terser-webpack-plugin')
 module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true } } })]
    }
  })
}

试过，这样会覆盖vue-cli的productionSourceMap设置，minimizer默认sourceMap是false，要让sourceMap为true，必须再配置里加上sourceMap配置 😓

{
    minimizer: [new TerserPlugin({ sourceMap: true, terserOptions: { compress: { drop_console: true } } })]
 },
zuibunan picture zuibunan on 2 Mar 2019

@zuibunan 不太清楚你的具体环境。我建议你可以在configureWebpack配置方法里面打debugger, 看下你的config对象具体是什么, 看看terserOptions在哪。
调试脚本node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js build

kind-hearted picture kind-hearted on 4 Mar 2019

使用高级链式配置configureWebpack的方式配置 terser-webpack-plugin 插件会导致vue-cli默认的webpack配置被重写，为了不改变默认配置，最后使用 configureWebpack 来进行简单的合并配置，这种方式只会对配置进行新增，而不会改变默认配置：

configureWebpack: config => {
  // 打包时删除console和debugger
  Object.assign(config.optimization.minimizer[0].options.terserOptions.compress, {
      drop_debugger: true,
      drop_console: true
  })
}
7neves picture 7neves on 26 Sep 2019

翻了不少答案，最后找到Vue Cli4可以这样做，会保留Vue CLI原有的terser配置不被覆盖：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

文档：https://cli.vuejs.org/migrating-from-v3/#vue-cli-service

duola8789 picture duola8789 on 10 Jan 2020
👍6

翻了不少答案，最后找到Vue Cli4可以这样做，会保留Vue CLI原有的terser配置不被覆盖：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

文档：https://cli.vuejs.org/migrating-from-v3/#vue-cli-service

翻了不少答案，您这个是正解。赞！ @duola8789

feng9017 picture feng9017 on 14 Jan 2020

翻了不少答案，最后找到Vue Cli4可以这样做，会保留Vue CLI原有的terser配置不被覆盖：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

文档：https://cli.vuejs.org/migrating-from-v3/#vue-cli-service

翻了不少答案，您这个是正解。赞！ @duola8789

不会报config.optimization.minimizer('terser').tap未定义的错误吗

wz71014q picture wz71014q on 28 Apr 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wahidrahim picture wahidrahim  ·  3Comments
eladcandroid picture eladcandroid  ·  3Comments
joshuajohnson814 picture joshuajohnson814  ·  3Comments
Gonzalo2683 picture Gonzalo2683  ·  3Comments
Benzenes picture Benzenes  ·  3Comments