vue项目 + iview 引入cdn

vue项目 + iview 引入cdn

背景

vue cli + webpack 项目，使用build后，vendor包过大，因此使用cdn将静态的资源放到cdn服务器上。

步骤

1. open build/webpack.base.conf.js 将下列代码添加到module.exports中
   externals: {
   ‘vue’:‘Vue’,
   ‘vuex’:‘Vuex’,
   ‘vuex’:‘Vuex’,
   ‘iview’:‘iView’,
   ‘ali-oss’:‘OSS’,
   ‘vue-router’:‘VueRouter’,
   },
   
2. 由于要区分开发和生产环境 因此在build/webpack.dev.conf.js and webpack.prod.conf.js 中plugins 配置HtmlWebpackPlugin
   cdn: {
   css: [‘https://自己的cdn服务器or bootcdn/iview.css’],
   js: [
   ‘https://自己的cdn服务器or bootcdn/vue.js’,
   ‘https://自己的cdn服务器or bootcdn/vuex.js’,
   ‘https://自己的cdn服务器or bootcdn/vue-router.js’,
   ‘https://自己的cdn服务器or bootcdn/iview.js’,
   ‘https://自己的cdn服务器or bootcdn/aliyun-oss-sdk.js’,
   ]
   },
   
   3. 在index.html 中配置
   css
   <% if (htmlWebpackPlugin.options.cdn) {%>
   <% for (var css of htmlWebpackPlugin.options.cdn.css) {%>
   
   <% }%>
   <% }%>
   js
   <% if (htmlWebpackPlugin.options.cdn) {%>
   <% for (var js of htmlWebpackPlugin.options.cdn.js) {%>
   
   <% }%>
   <% }%>
   
   4.将 use（）全部删掉 然后build一下，能正常跑起就ok了。