Vue关闭线上源码移除console

Vue关闭线上源码移除console_第1张图片

不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。

前言

文章中的配置,项目基于Vue CLI 3.0搭建,版本大于等于3.0不会有问题,其他环境版本请绕道。

关闭线上源码

  • 在Vue.config.js中添加如下代码
module.exports = {
     
    // 关闭线上源码
    productionSourceMap: false,
}
  • 移除后的效果

Vue关闭线上源码移除console_第2张图片

移除console

  • 安装插件:终端执行
yarn add terser-webpack-plugin
  • 在vue.config.js中添加如下代码
module.exports = {
     
    configureWebpack:{
     
        optimization:{
     
            minimizer: [new TerserPlugin({
      terserOptions: {
      compress: {
      drop_console: true } } })]
        }
    }
}
  • 插件的更多使用方法:terser-webpack-plugin

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注

你可能感兴趣的:(前端,vue,vue.js)