Vue线上使用cdn加速

1、public/index.html

2、vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const UglifyJsPlugin = require('terser-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: './',
  productionSourceMap: false,
  lintOnSave: false,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('img', resolve('src/assets/images'))
      .set('css', resolve('src/assets/styles'))
      .set('icon', resolve('src/assets/icon'))
  },

  configureWebpack: config => {
    // 生产模式
    config.externals = {
      "AMap": "AMap"
    }
    if (isProduction) {
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        "AMap": "AMap"
      }
      // 打包生产.gz包
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
      // 添加自定义代码压缩配置
      config.plugins.push(
        new UglifyJsPlugin({
          terserOptions: {  //  uglifyOptions
            compress: {
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      )
    }
  },

  // devServer: {
  //   proxy: {
  //     '/api': {
  //       target: 'https://xxx.com.cn',
  //       ws: true,
  //       changeOrigin: true,
  //       pathRewrite: {
  //         '^/api': ''
  //       }
  //     }
  //   }
  // }
}

注意，这个只是线上使用，开发时用的是本地的代码，所以本地开发时，需要把index.html里使用cdn的链接注释掉。