vue-cli4脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建

const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
// 是否使用cdn
const needCdn = false
// 是否压缩文件
const isZip = false
// 引入less公共文件
function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/css/reset.less'),
        path.resolve(__dirname, './src/assets/css/variable.less')
      ]
    })
  }
const cdn = {
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'VueRouter': 'VueRouter',
    iview: 'iView',
    axios: 'axios',
    BMapGL: 'BMapGL'
  },
  css: [],
  js: [
    'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
    'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
  ]
}

module.exports = {
//部署应用包时的基本 URL， 用法和 webpack 本身的 output.publicPath 一致。
  publicPath: './',
  //输出文件目录
  outputDir: 'dist',
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      less: {
        // globalVars: {
        // }
      }
    }
  },
  //false 可以加速生产环境构建
  productionSourceMap: false,
  // webpack相关配置
  chainWebpack: config => {
  // less公共文件引入
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    //图片处理，注意用cnpm 淘宝镜像
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
	// 别名配置
    config.resolve.alias
      .set('@', path.resolve(__dirname, './src'))
      .set('@V', path.resolve(__dirname, './src/views'))
      .set('@N', path.resolve(__dirname, './node_modules'))
      .set('@C', path.resolve(__dirname, './src/components'))
      .set('@I', path.resolve(__dirname, './src/assets/image'))
      // 打包分析
      // 打包之后自动生成一个名叫report.html文件(可忽视)
      if (IS_PROD) {
        config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
          analyzerMode: "static"
        }]);
      }
    // 生产环境或本地需要cdn时，才注入cdn
    config.plugin('html').tap(args => {
        args[0].title = process.env.VUE_APP_ITEMNAME
        if (needCdn) args[0].cdn = cdn
        return args
      }),
      // 删除预加载
      config.plugins.delete('preload')
      config.plugins.delete('prefetch')
  },
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false, 
  devServer: {
    port: 8086,
    host: 'localhost',
    hotOnly: true, // 热更新
    overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },
    // 跨域
    proxy: {
      '/api': {
        target: 'http://www.baidu.com',
        changeOrigin: true,
        ws: true, // websocket支持
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: config => {
    if (needCdn) config.externals = cdn.externals
    if (isZip) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240, // 只有大小大于该值的资源会被处理
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        })
      )
    }
  },

}