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 中引入 即可

   



  
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>
    
       这个是element-ui的css样式
  
  
    
    

步骤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