vue中cdn加速与本地资源混合使用,解决cdn失效问题

这个问题在写一个移动端项目的时候出现过.引入的cdn资源失效,后来直接下载资源放到本地进行引用.后来在网上查阅资料发现,通过document.write()可以两种方法混合使用,特此记录一下.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>

<script src="https://unpkg.com/element-ui@2.4.6/lib/index.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>

<script src="/static/tinymce/tinymce.min.js"></script>

<script src="/static/dll.vendor.js"></script>

<script type='text/javascript'>

if (typeof Vue == 'undefined') {
document.write(unescape("%3Cscript src='/static/js/vue/2.5.2/vue.min.js'%3E%3C/script%3E"))

}

if (typeof VueRouter == 'undefined') {
document.write(unescape("%3Cscript src='/static/js/vue-router/3.0.1/vue-router.min.js'%3E%3C/script%3E"))

}

if (typeof Vuex == 'undefined') {
document.write(unescape("%3Cscript src='/static/js/vuex/3.0.1/vuex.min.js'%3E%3C/script%3E"))

}

if (typeof axios == 'undefined') {
document.write(unescape("%3Cscript src='/static/js/axios/0.18.0/axios.min.js'%3E%3C/script%3E"))

}

if (typeof echarts == 'undefined') {
document.write(unescape("%3Cscript src='/static/js/echarts/4.1.0/echarts.min.js'%3E%3C/script%3E"))

}

</script>

如果cdn加载失败，去到本地加载，其实资源还是下载到了本地，打包大小并没有改变.希望对你有帮助,有啥问题欢迎留言讨论…