vueCli3 CDN资源优化加载

搜索CDN加速貌似https://www.bootcdn.cn/ bootCDN国内用很nice
主要以我自己的为例子哈

步骤1：卸载npm 安装的依赖例如：npm uninstall element-ui axios vue vuex vue-router 如果有要卸载多个的话直接后面加上即可

　　　进入到bootCDN里找到你要用的CDN地址 copy一下到public里的index.html 中引入即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="./reset.css">
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">   这个是element-ui的css样式
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected  这些是引入的CDN地址呗-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>    
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
  </body>
</html>

步骤2：在vue.config.js 中配置 element-ui 的变量名必须使用 ELEMENT 没的说的为啥子呢？因为element-ui的 umd 模块名是 ELEMENT

module.exports = {
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.json', '.vue', '.scss', '.css'],
            alias: {},
        },
        externals: {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',
            'axios': 'axios'
        }
    }
}

步骤3：让我们来到main.js 里面其实我这边需要改动的就是一个element-ui的一个变量名 ELEMENT

import Vue from 'vue'
import router from './router'
import store from './store'
import ELEMENT from 'element-ui';
Vue.use(ELEMENT)

步骤4：进入到router里面的index.js 里面将引用的vue 和 vue-router 给注释掉
　　　进入到store里面的index.js 里面将引用的 vue 和 vuex 给注释掉

最后跑一下看下跑的起来啵没问题那就没问题了
参考的大佬链接：https://www.jianshu.com/p/aebfa267f7cd
　　　　