如何通过CDN加速Vue.js应用的加载速度?
- 行业动态
- 2024-10-10
- 3227
Vue.js 可以通过 CDN(内容分发网络)直接在 HTML 页面中引入并使用。
Vue.js CDN 引入方法
CDN来源 | URL | 版本 |
jsDelivr CDN | https://cdn.jsdelivr.net/npm/vue/dist/vue.js |
最新版本 |
Vue.js官方CDN | https://vuejs.org/js/vue.min.js |
稳定版本 |
Staticfile CDN(国内) | https://cdn.staticfile.net/vue/3.0.5/vue.global.js |
3.0.5 |
字节跳动CDN(国内) | https://lf3cdntos.bytecdntp.com/cdn/expire1M/vue/3.2.31/vue.global.min.js |
3.2.31 |

表格列出了几种常见的Vue.js通过CDN引入的方法,包括国际和国内的CDN服务,使用CDN可以快速地在你的项目中引入Vue.js,无需通过npm或其他包管理工具进行安装,从而简化项目的设置过程。
CDN名称 | 链接 | 描述 |
unpkg | https://unpkg.com/vue@2.6.14/dist/vue.min.js | Vue 2.x 的最小化版本,适用于 Vue 2.6.14 版本 |
unpkg | https://unpkg.com/vue@3.2.31/dist/vue.cjs.prod.js | Vue 3.x 的 CommonJS 格式最小化版本,适用于 Vue 3.2.31 版本 |
jsdelivr | https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js | Vue 2.x 的最小化版本,适用于 Vue 2.6.14 版本 |
jsdelivr | https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.cjs.prod.js | Vue 3.x 的 CommonJS 格式最小化版本,适用于 Vue 3.2.31 版本 |
unpkg | https://unpkg.com/vue@2.6.14 | Vue 2.x 的完整版本,适用于 Vue 2.6.14 版本 |
unpkg | https://unpkg.com/vue@3.2.31 | Vue 3.x 的完整版本,适用于 Vue 3.2.31 版本 |
cdnjs | https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js | Vue 2.x 的最小化版本,适用于 Vue 2.6.14 版本 |
cdnjs | https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.min.js | Vue 3.x 的最小化版本,适用于 Vue 3.2.31 版本 |
使用说明:
1、选择适合你项目版本的 CDN 链接。

2、将 CDN 链接添加到 HTML 文档的<head>
部分或<body>
部分的底部。
3、引入 Vue 库,并开始使用 Vue 功能。
对于 Vue 2.6.14 的最小化版本,你可以添加以下代码到 HTML 文档:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
或者,对于 Vue 3.2.31 的 CommonJS 格式最小化版本,你可以添加以下代码:
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.cjs.prod.js"></script>