Vue cli3 CDN

 vue.config.js

const cdn = {
  css: [],
  js: [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js",
    "https://unpkg.com/[email protected]",
    "https://unpkg.com/axios/dist/axios.min.js",
    "https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.min.js"
  ]
};
// const CompressionWebpackPlugin = require("compression-webpack-plugin");
// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;  //开启Gzip压缩
const isProduction = process.env.NODE_ENV === "production";
module.exports = {
  //   outputDir: `${srcFile}`, // 在npm run build时 生成文件的目录 type:string, default:'dist'
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  publicPath: '/xzdist/',
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 50, // 换算的基数
            selectorBlackList: [], // 忽略转换正则匹配项 过滤掉.am-开头的class，不进行rem转换
            propList: ['*']
          })
        ]
      }
    },
  },
  chainWebpack: config => {
    /* 添加分析工具 */
    if (isProduction) {
      // 不要预先渲染
      // config.plugins.delete("prefetch");
      // config.plugins.delete("preload");
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码
      config.optimization.splitChunks({
        chunks: 'all'
      });
      // 生产环境注入cdn
      config.plugin('html').tap(args => {
        args[0].cdn = cdn;
        return args;
      });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        echarts: 'echarts',
        axios: 'axios'
      }
    }
  }
};

 html 配置

  
    
    
    
    
    

    
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>
    
    
  

  
    
    
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>