Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lixueninggg opened this issue Dec 6, 2018 · 24 comments

Comments

@lixueninggg
Copy link

@lixueninggg lixueninggg commented Dec 6, 2018

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

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Dec 6, 2018

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

yarn build 1&>/dev/null

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

@sodatea sodatea closed this Dec 6, 2018
@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Dec 6, 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)

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 6, 2018

好的谢谢

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 6, 2018

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

可以解决

@sunlei4076

This comment has been minimized.

Copy link

@sunlei4076 sunlei4076 commented Dec 13, 2018

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

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 13, 2018

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

@sunlei4076

This comment has been minimized.

Copy link

@sunlei4076 sunlei4076 commented Dec 13, 2018

/ vue -V 3.0.5

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 13, 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 } } })]
    }
  })
}

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

@bookldk

This comment has been minimized.

Copy link

@bookldk bookldk commented Dec 14, 2018

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

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

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 14, 2018

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

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

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

@bookldk

This comment has been minimized.

Copy link

@bookldk bookldk commented Dec 14, 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)

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

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 14, 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引用就好了

@bookldk

This comment has been minimized.

Copy link

@bookldk bookldk commented Dec 14, 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')

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 14, 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怎么写的,而且请不要没尝试过解决方案直接问,可以吗

@bookldk

This comment has been minimized.

Copy link

@bookldk bookldk commented Dec 14, 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

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Dec 14, 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语句怎么加。。

三元运算符不行吗

@kind-hearted

This comment has been minimized.

Copy link

@kind-hearted kind-hearted commented Dec 22, 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
    }
  }
@wQueryLoveMm

This comment has been minimized.

Copy link

@wQueryLoveMm wQueryLoveMm commented Feb 25, 2019

@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

This comment has been minimized.

Copy link

@zuibunan zuibunan commented Mar 2, 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

This comment has been minimized.

Copy link

@zuibunan zuibunan commented Mar 2, 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,不是对象

@lixueninggg

This comment has been minimized.

Copy link
Author

@lixueninggg lixueninggg commented Mar 2, 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 } } })]
    }
  })
}
@zuibunan

This comment has been minimized.

Copy link

@zuibunan zuibunan commented Mar 2, 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 } } })]
 },
@kind-hearted

This comment has been minimized.

Copy link

@kind-hearted kind-hearted commented Mar 4, 2019

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

@7neves

This comment has been minimized.

Copy link

@7neves 7neves commented Sep 26, 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
  })
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.