配置在生产环境移除代码中的console.log

在开发过程中为了方便测试代码，写了很多的console.log,但是在打包上线后并不需要这些console.log

• 安装babel-plugin-transform-remove-console插件

  npm i babel-plugin-transform-remove-console -D 或者 yarn add babel-plugin-transform-remove-console -D
  

然后在babel.config.js文件里配置

const prodPlugin = []

// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
if (process.env.env === 'pro') {
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}
module.exports = {
   plugins: [
     ...prodPlugin
   ]
}

再在项目中的vue.config.js文件里配置

const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const DEV_BACKEND_ADDR = process.env.VUE_APP_DEV_BACKEND_ADDR
// const EREDIS_TEST_BACKEND_ADDR = process.env.VUE_APP_EREDIS_TEST_BACKEND_ADDR
console.log('url', DEV_BACKEND_ADDR)

module.exports = {
  publicPath: './', // 相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  outputDir: 'dist', // 输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  filenameHashing: false, // 设为 false 来关闭文件名哈希
  lintOnSave: true, // 是否在保存的时候使用 `eslint-loader` 进行检查
  assetsDir: 'static', // 放置public下生成静态资源的文件 (js、css、img、fonts)
  productionSourceMap: false, // 以减少打包后的项目体积, 不会出现.map 文件，map文件：运行时报错主要定位到出现问题的代码行列
  chainWebpack: config => { // 便于阅读打包编译后的文件
    config.optimization.minimize(false)
  },
  configureWebpack: config => {
    config.plugins.push(
      new CompressionPlugin({ // 打包的时候开启gzip可以大大减少体积，非常适合于上线部署
        filename: '[path].gz[query]', // 目标资源文件名
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配对应文件
        threshold: 10240, // 只处理比这个值大的资源。按字节计算。
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
        cache: true // 是否缓存
      }))
    if (process.env.env === 'dev') {
      config.devServer = {
        open: true, // 项目启动打开页面
        port: 2333, // 端口号配置
        watchOptions: {
          poll: false, // 通过传递 true 开启 polling，或者指定毫秒为单位进行轮询。
          aggregateTimeout: 300 // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
        },
        proxy: {
          '/api': {
            target: `${DEV_BACKEND_ADDR}`,
            ws: false, // ws:true / false，是否代理websockets
            changeOrigin: true, // 跨域时，本地就会虚拟一个服务器接收你的请求并代你发送该请求
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    }
    if (process.env.env === 'pro') {
      config.devServer = {
        open: true, // 项目启动打开页面
        port: 2333, // 端口号配置
        watchOptions: {
          poll: false, // 通过传递 true 开启 polling，或者指定毫秒为单位进行轮询。
          aggregateTimeout: 300 // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
        },
        proxy: {
          '/api': {
            target: `${DEV_BACKEND_ADDR}`,
            ws: false, // ws:true / false，是否代理websockets
            changeOrigin: true, // 跨域时，本地就会虚拟一个服务器接收你的请求并代你发送该请求
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
      config.optimization = { // 将打包后的依赖包分解, 将每个依赖包分解成单独的js文件，防止打包后依赖包体积过大
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      }

    }
  }
}