当一个cdn挂掉之后，让加载另一个cdn
我项目上之前都是用的bootCDN免费开源的，
近段时间bootcdn经常挂掉，导致项目瘫痪，
然后就向着如何在一个cdn挂掉之后，加载另一个cdn平台上的静态资源
网上拿jquery写了个例子：
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js%22%3E%3C/script> 2 <script type="text/javascript"> 3 if (!window.jQuery) { 4 document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js%22%3E%3C' + '/script>'); 5 } 6 </script>
上述方式如果加载一个cdn静态资源还好，如果加载多个cdn，比如bootstrap依赖jquery，那么加载顺序就是个问题，
然后发现了个非常简单的解决方式，就是将两个不同的cdn同时加载，即使有一个cdn平台挂掉了，另一个也会加载成功，毕竟两个cdn平台同时挂掉的几率很低
拿jquery打个比方，同时加载bootcdn和七牛cdn上的资源，这样，其中有一个挂了，另一个还会起作用的，就写死就行了，不用担心加载顺序问题
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
最后奉上七牛源静态资源cdn查询网地址：http://www.staticfile.org/
下面是我在一个项目中的一个使用例子
<!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,user-scalable=no,initial-scale=1.0"> <!--[if lte IE 8]> <link rel="stylesheet" href="./static/js/compatibilityJS/ie-blocker.css"> <script src="./static/js/compatibilityJS/ie-blocker.zhCN.js"></script> <![endif]--> <!-- summernote --> <link href="https://cdn.bootcss.com/summernote/0.8.12/summernote.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/summernote/0.8.12/summernote.css" rel="stylesheet"> <!-- bootstrap --> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- adminLte --> <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet" > <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet" > <!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" > <!-- element.css --> <link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet"> <link href="https://cdn.staticfile.org/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet"> <title></title> <style> *{ margin:0; padding:0; list-style: none; -webkit-overflow-scrolling: touch;/* 在移动端使关东更流畅 */ -webkit-transform: translate3d(0, 0, 0);/*开启Gpu硬件加速*/ } body{ position: absolute; left:0; top:0; width:100%; bottom:0; overflow: hidden; } #appWrap{ position: absolute; left:0; top:0; width:100%; bottom:0; overflow:hidden; } #app{ position: absolute; left:0; top:0; width:100%; bottom:0; overflow:auto; } </style> </head> <body> <noscript> <strong>We're sorry but meetingmanage doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="appWrap"> <div id="app"></div> </div> <!-- vue --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <!-- axios --> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script> <!-- vuex --> <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script> <script src="https://cdn.staticfile.org/vuex/3.1.1/vuex.min.js"></script> <!-- vue-router --> <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js"></script> <!-- element-ui --> <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script> <script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script> <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <!-- laydate --> <script src="./static/js/laydate/layDate-v5.0.9/laydate/laydate.js"></script> <!-- summernote --> <script src="https://cdn.bootcss.com/summernote/0.8.12/summernote.min.js"></script> <script src="https://cdn.staticfile.org/summernote/0.8.12/summernote.min.js"></script> <script src="https://cdn.bootcss.com/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script> <script src="https://cdn.staticfile.org/summernote/0.8.12/lang/summernote-zh-CN.min.js"></script> <!-- bootstrap --> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- adminLte --> <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script> <script src="https://cdn.staticfile.org/admin-lte/2.4.10/js/adminlte.min.js"></script> <!-- qiniu --> <script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script> <!-- qrcode --> <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <!-- js-wxsdk --> <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> </body> </html>
上面的用两个cdn加载静态资源，其中vue-router加载两次时，页面有个报错，意思就是，vue-router不能注册两次，虽然能正常使用，但是页面有报错不太好，
于是想着，将vue-router用npm的方法安装到本地，这个文件也不算大，不是太影响项目体积，
于是将config中的 vue-router注释了
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
// 'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
在router.js中改成这样，需要注册一下router
import Vue from "vue";
import Router from 'vue-router'
Vue.use(Router); //之前这是注释掉的
然后就不用用cdn的方式引入vue-router了
。
