如何使用CDN引用资源
在HTML文件中引入CDN链接
（图片来源网络，侵删）
1、添加CDN链接：
在项目的index.html文件的<head>标签中，将CDN链接添加到<title>标签下方。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<!-引入Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js" rel="stylesheet" type="text/javascript"></script>
<!-引入Element UI样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<!-引入Element UI脚本 -->
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js" rel="stylesheet" type="text/javascript"></script>
</head> 2、其他库的引入：
同样地，可以引入其他常用库如Axios和Vuex等：
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" rel="stylesheet" type="text/javascript"></script> 配置Webpack使用CDN
（图片来源网络，侵删）
1、修改webpack配置文件：
在webpack.base.conf.js文件中添加externals配置，确保项目不从本地引入这些库，而是直接从CDN获取：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
'axios': 'axios',
}, 对于使用vue-cli 3及以上版本的项目，可以在vue.config.js文件中配置：
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'axios': 'axios',
'vuex': 'Vuex',
},
},
}; 2、删除之前的引用：
在main.js文件中删除之前对Vue、Vuex、Vue Router、Element UI等库的引用，因为这些库已经通过CDN引入：
（图片来源网络，侵删）
// import Vue from 'vue'
// import router from './router'
// import 'element-ui/lib/theme-chalk/index.css';
// import ElementUI from 'element-ui';
// import Vuex from 'vuex'
// import axios from 'axios'
// Vue.use(Vuex)
// Vue.use(ElementUI); 防范CDN加载失败
1、检查CDN内容是否加载成功：
在脚本代码后添加判断语句，如果CDN加载失败则加载本地脚本，以加载jQuery库为例：
<!-Adds google cdn reference -->
<script src="http://gapis.geekzu.org/ajax/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-Cdn fail refers to local library -->
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script> 2、使用协议省略的URL：
采用“协议省略”方式来引用第三方内容，使其可以通过HTTP或HTTPS灵活引用。
<!-Adds protocol-less google cdn reference -->
<script src="//gapis.geekzu.org/ajax/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 通过在HTML文件中添加CDN链接，并在Webpack配置文件中设置externals，可以有效地引用和使用CDN资源，为防止CDN加载失败，可以添加相应的检查机制以确保项目的稳定性。
各位小伙伴们，我刚刚为大家分享了有关cdn怎么引用的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
本文来源于互联网，如若侵权，请联系管理员删除，本文链接：https://www.9969.net/77090.html
