| 步骤 | 操作内容 |
| | |
| 1 | 在项目的index.html
文件中,将CDN链接添加到<head>
标签的<title>
标签下方。
<head> ... <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head>
| 2 | 在webpack配置文件中设置externals,确保项目不从本地引入这些库,而是直接从CDN获取。
module.exports = { configureWebpack: { externals: { 'vue': 'Vue', 'vuerouter': 'VueRouter', 'elementui': 'ELEMENT', 'axios': 'axios', 'vuex': 'Vuex', }, }, };
| 3 | 在main.js
文件中去除原来的引用。
// import Vue from 'vue' // import router from './router' // import ElementUI from 'elementui'; // import Vuex from 'vuex' // import axios from 'axios' // Vue.use(Vuex) // Vue.use(ElementUI);
注意事项:
1、CDN引入方式适用于前后端不分离的项目。
2、CDN引入的库可能会受到网络状况的影响,建议在使用时仔细测试。
CDN 引入内容 | 描述 | 示例代码 |
CSS 样式表 | 引入外部 CSS 文件,用于页面样式 |
|
JavaScript 脚本 | 引入外部 JavaScript 文件,用于页面功能 |
|
图片资源 | 引入外部图片资源,如图标、背景等 |
|
字体资源 | 引入外部字体资源,如自定义字体 |
|
短视频资源 | 引入外部短视频资源,如视频广告等 |
|
音频资源 | 引入外部音频资源,如背景音乐等 |
|
第三方服务 | 引入第三方服务 API,如地图、统计等 |
|
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。