在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>
参考文章: