CDN链接失效,切换本地文件

场景:如今的前端项目很多使用CDN,但是万一使用的CDN服务器出现问题,导致引用的CDN文件都拿不到,项目崩溃打不开。

处理方案:如果引用CDN的文件出错了,拿不到,那么就引用本地相对应的文件。

下面以Vue项目为列:

项目的启动页 /index.html

<script src="http://cdn.xxx/cdn/js/vue.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/js/cdn/js/vue.min.js"%3E%3C/script%3E'))</script>
    
<script src="http://cdn.xxx/cdn/js/element-ui.js"></script>
<script>!window.ELEMENT && document.write(unescape('%3Cscript src="/static/js/cdn/js/element-ui.js"%3E%3C/script%3E'))</script>
    
<script src="http://cdn.xxx/cdn/js/axios.min.js"></script>
<script>!window.axios && document.write(unescape('%3Cscript src="/static/js/cdn/js/axios.min.js"%3E%3C/script%3E'))</script>
    
<script src="http://cdn.xxx/cdn/js/jquery-1.12.4.js"></script>
<script>!window.$ && document.write(unescape('%3Cscript src="/static/js/cdn/js/jquery-1.12.4.js"%3E%3C/script%3E'))</script>
    
<script src="http://cdn.xxx/cdn/js/echarts.js"></script>
<script>!window.echarts && document.write(unescape('%3Cscript src="/static/js/cdn/js/echarts.js"%3E%3C/script%3E'))</script>
    
<script src="http://cdn.xxx/cdn/js/echarts-liquidfill.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/js/cdn/js/echarts-liquidfill.js"%3E%3C/script%3E'))</script>

这样处理会导致项目体积变大,但是这种处理总不会直接导致项目崩溃的,给用户的体验能更好一点,牺牲这么一点点是值得的。很多事情都是没有绝对的情况,都是相对的,这就需要我们自己去权衡了。

<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="./static/js/vue.min.js"%3E%3C/script%3E'))</script>
    
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>!window.VueRouter && document.write(unescape('%3Cscript src="./static/js/vue-router.min.js"%3E%3C/script%3E'))</script>
    
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>!window.axios && document.write(unescape('%3Cscript src="./static/js/axios.min.js"%3E%3C/script%3E'))</script>
    
<script src="https://cdn.bootcss.com/element-ui/2.4.9/index.js"></script>
<script>!window.Element && document.write(unescape('%3Cscript src="./static/js/element-ui-index.js"%3E%3C/script%3E'))</script>
<script>!window.Element && document.write(unescape('%3Clink href="./static/css/element-ui-index.css" rel="stylesheet"%3E%3C/link%3E'))</script>
    
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script>!window.Qs && document.write(unescape('%3Cscript src="./static/js/qs.js"%3E%3C/script%3E'))</script>
    
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>!window.Vuex && document.write(unescape('%3Cscript src="./static/js/vuex.min.js"%3E%3C/script%3E'))</script>

 

posted @ 2021-12-27 09:09  盼星星盼太阳  阅读(876)  评论(0编辑  收藏  举报