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

lixueninggg · 2018-12-06T03:56:36Z

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?

暂无

sodatea · 2018-12-06T04:07:27Z

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

yarn build 1&>/dev/null

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

sodatea · 2018-12-06T04:27:07Z

哦你说的是打包后去掉 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）

lixueninggg · 2018-12-06T05:28:47Z

好的谢谢

lixueninggg · 2018-12-06T06:09:37Z

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

可以解决

sunlei4076 · 2018-12-13T10:13:01Z

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

lixueninggg · 2018-12-13T10:20:06Z

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

sunlei4076 · 2018-12-13T10:21:48Z

/ vue -V 3.0.5

lixueninggg · 2018-12-13T10:23:34Z

/ 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 } } })]
    }
  })
}

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

bookldk · 2018-12-14T10:08:23Z

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

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

lixueninggg · 2018-12-14T10:15:26Z

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

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

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

bookldk · 2018-12-14T10:21:19Z

哦你说的是打包后去掉 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）

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

lixueninggg · 2018-12-14T10:25:41Z

哦你说的是打包后去掉 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引用就好了

bookldk · 2018-12-14T10:29:37Z

哦你说的是打包后去掉 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')

lixueninggg · 2018-12-14T10:32:23Z

哦你说的是打包后去掉 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怎么写的,而且请不要没尝试过解决方案直接问,可以吗

bookldk · 2018-12-14T10:37:17Z

哦你说的是打包后去掉 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 · 2018-12-14T10:39:10Z

哦你说的是打包后去掉 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语句怎么加。。

三元运算符不行吗

kind-hearted · 2018-12-22T03:36:39Z

试试这样

  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
    }
  }

wangxdmm · 2019-02-25T13:48:14Z

@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 · 2019-03-02T06:23:06Z

@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 · 2019-03-02T06:23:38Z

试试这样

  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，不是对象

lixueninggg · 2019-03-02T06:35:06Z

试试这样

  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 } } })]
    }
  })
}

zuibunan · 2019-03-02T06:46:46Z

试试这样

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

kind-hearted · 2019-03-04T01:52:44Z

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

7neves · 2019-09-26T02:58:29Z

使用高级链式配置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
  })
}

duola8789 · 2020-01-10T06:52:57Z

翻了不少答案，最后找到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

feng9017 · 2020-01-14T06:26:07Z

翻了不少答案，最后找到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

wz71014q · 2020-04-28T08:44:06Z

翻了不少答案，最后找到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未定义的错误吗

mishengqiang · 2022-02-23T09:43:22Z

vue-cli v3

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

vue-cli v4/v5

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

具体可以查看https://cli.vuejs.org/migrations/migrate-from-v3.html#vue-config-js-options

vue-cli v5还有一种简单的配置，这种配置会覆盖默认的配置，不建议使用

module.exports = {
  terser: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  }
}

具体可以查看：#6752

sodatea closed this as completed Dec 6, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lixueninggg commented Dec 6, 2018

sodatea commented Dec 6, 2018

sodatea commented Dec 6, 2018 •

edited

lixueninggg commented Dec 6, 2018

lixueninggg commented Dec 6, 2018 •

edited

sunlei4076 commented Dec 13, 2018

lixueninggg commented Dec 13, 2018

sunlei4076 commented Dec 13, 2018

lixueninggg commented Dec 13, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

kind-hearted commented Dec 22, 2018

wangxdmm commented Feb 25, 2019

zuibunan commented Mar 2, 2019

zuibunan commented Mar 2, 2019 •

edited

lixueninggg commented Mar 2, 2019

zuibunan commented Mar 2, 2019

kind-hearted commented Mar 4, 2019

7neves commented Sep 26, 2019 •

edited

duola8789 commented Jan 10, 2020 •

edited

feng9017 commented Jan 14, 2020

wz71014q commented Apr 28, 2020

mishengqiang commented Feb 23, 2022 •

edited

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

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

Comments

lixueninggg commented Dec 6, 2018

Version

Node and OS info

Steps to reproduce

What is expected?

What is actually happening?

sodatea commented Dec 6, 2018

sodatea commented Dec 6, 2018 • edited

lixueninggg commented Dec 6, 2018

lixueninggg commented Dec 6, 2018 • edited

sunlei4076 commented Dec 13, 2018

lixueninggg commented Dec 13, 2018

sunlei4076 commented Dec 13, 2018

lixueninggg commented Dec 13, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

bookldk commented Dec 14, 2018

lixueninggg commented Dec 14, 2018

kind-hearted commented Dec 22, 2018

wangxdmm commented Feb 25, 2019

zuibunan commented Mar 2, 2019

zuibunan commented Mar 2, 2019 • edited

lixueninggg commented Mar 2, 2019

zuibunan commented Mar 2, 2019

kind-hearted commented Mar 4, 2019

7neves commented Sep 26, 2019 • edited

duola8789 commented Jan 10, 2020 • edited

feng9017 commented Jan 14, 2020

wz71014q commented Apr 28, 2020

mishengqiang commented Feb 23, 2022 • edited

sodatea commented Dec 6, 2018 •

edited

lixueninggg commented Dec 6, 2018 •

edited

zuibunan commented Mar 2, 2019 •

edited

7neves commented Sep 26, 2019 •

edited

duola8789 commented Jan 10, 2020 •

edited

mishengqiang commented Feb 23, 2022 •

edited