cdn加速配置步骤

在.env文件中配置, 没有.env文件就新建一个.env文件

VUE_WEB_STAGE = CDN

在根目录新建cdn.js文件, 具体的cdn地址可以根据cdn服务器的地址为准

const externals = {
  'vue': 'Vue',
  'element-plus': 'ElementPlus',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'vuex': 'Vuex'
};
const cdn = {
  css: [
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/index.min.css',
  ],
  js: [
    'https://cdn.bootcdn.net/ajax/libs/vue/3.2.36/vue.global.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js',
    'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.12/vue-router.global.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/index.full.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/locale/zh-cn.min.js',
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/locale/zh-cn.min.js.map',
    'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/index.full.min.js.map',
  ]
};
module.exports = {cdn, externals};

修改vue.config.js

const {cdn, externals} = require('./cdn');
module.exports = {
  ...,
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].cdn = process.env.VUE_WEB_STAGE === 'CDN' ? cdn : {};
      return args;
    });
  },
  configureWebpack: {
    externals: process.env.VUE_WEB_STAGE === 'CDN' ? externals : {}
  }
};

修改index.html

• 在head标签中新增

<!--  使用CDN的css文件-->
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="preload" as="style" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
  <% } %>

• 在body标签中新增

<!--使用cdn加速的js文件-->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>