预防三方cdn失效,添加引用本地资源

1,367 阅读1分钟

在vue项目中出于减小打包vendor体积,所以使用了部分cdn资源,但是cdn资源存在失效的风险,所以为保证项目不至于在cdn失效后无法正常运行,可以判断cdn资源失效后使用本地资源。

这里三方是使用bootcdn的资源。参考:www.bootcdn.cn/

在index.html中

引入css:

// element-ui
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.7.0/theme-chalk/index.css" rel="stylesheet">
// mint-ui
<link href="https://cdn.bootcdn.net/ajax/libs/mint-ui/2.2.13/style.min.css" rel="stylesheet">

引入js:

// babel-polyfill
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
// vue
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.4.2/vue.min.js"></script>
// vue-router
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
// jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// mint-ui
<script src="https://cdn.bootcdn.net/ajax/libs/mint-ui/2.2.13/index.js"></script>
// axios
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.16.2/axios.min.js"></script>

判断cdn是否失效,加载本地资源。

方法一:

if (typeof Vue == 'undefined') {      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/babel-polyfil@6.26.0/polyfill.min.js"%3E%3C/script%3E'));      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/vue@2.4.2/vue.min.js"%3E%3C/script%3E'));      
    document.write(unescape('%3Clink href="./static/utils/bootcdn/element-ui@2.7.0/index.css" rel="stylesheet"%3E%3C/link%3E'));    
}    
if (typeof VueRouter == 'undefined') {      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/vue-router@3.0.1/vue-router.min.js"%3E%3C/script%3E'));    
}    
if (typeof jQuery == 'undefined') {      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/jquery@3.3.1/jquery.min.js"%3E%3C/script%3E'));    
}    
if (typeof MINT == 'undefined') {      
    document.write(unescape('%3Clink href="./static/utils/bootcdn/mint-ui@2.2.13/style.min.css" rel="stylesheet"%3E%3C/link%3E'));      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/mint-ui@2.2.13/index.js"%3E%3C/script%3E'));    
}    
if (typeof axios == 'undefined') {      
    document.write(unescape('%3Cscript src="./static/utils/bootcdn/axios@0.16.2/axios.min.js"%3E%3C/script%3E'));    
}

方法二:

<script>!window.Vue && document.write(unescape('%3Cscript src="./static/utils/bootcdn/babel-polyfil@6.26.0/polyfill.min.js"%3E%3C/script%3E'))</script>  
<script>!window.Vue && document.write(unescape('%3Clink href="./static/utils/bootcdn/element-ui@2.7.0/index.css" rel="stylesheet"%3E%3C/link%3E'))</script>
<script>!window.Vue && document.write(unescape('%3Cscript src="./static/utils/bootcdn/vue@2.4.2/vue.min.js"%3E%3C/script%3E'))</script>
<script>!window.VueRouter && document.write(unescape('%3Cscript src="./static/utils/bootcdn/vue-router@3.0.1/vue-router.min.js"%3E%3C/script%3E'))</script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./static/utils/bootcdn/jquery@3.3.1/jquery.min.js"%3E%3C/script%3E'))</script>
<script>!window.MINT && document.write(unescape('%3Clink href="./static/utils/bootcdn/mint-ui@2.2.13/style.min.css" rel="stylesheet"%3E%3C/link%3E'))</script>
<script>!window.MINT && document.write(unescape('%3Cscript src="./static/utils/bootcdn/mint-ui@2.2.13/index.js"%3E%3C/script%3E'))</script>
<script>!window.axios && document.write(unescape('%3Cscript src="./static/utils/bootcdn/axios@0.16.2/axios.min.js"%3E%3C/script%3E'))</script>

暂时没有找到判断css的cdn是否失效的方式,所以是根据js来进行判断的。

<script>!window.Vue && document.write(unescape('%3Clink href="./static/utils/bootcdn/element-ui@2.7.0/index.css" rel="stylesheet"%3E%3C/link%3E'))</script>

参考文章:

segmentfault.com/a/119000001…