jsDelivr 开源公共 CDN

文章内容输出来源:拉勾教育 大前端高薪训练营

jsDelivr 基本介绍

CDN,全称是 Content Delivery Network,即内容分发网络。

jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

jsDelivr 可以解决 npmGitHub、WordPress` 加载资源缓慢,甚至打不开等的问题,因为它免费提供CDN 加速。

jsDelivr 基本使用

Npm 的使用

基本介绍

加载文件

  • ionicons/2.0.1/css/ionicons.min.css

加载网址

  https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css

查找过程

  • 官网中搜索想要加载的 模块名(包名),如图所示:

    在这里插入图片描述

  • 点击 搜索到的结果,进入选择其所需要的版本号,如图所示:

    在这里插入图片描述

  • 点击找到的对应版本的文件,得出最终的转换加载网址,如图所示:

    在这里插入图片描述

  • 转换后的网址,如图所示:

    在这里插入图片描述

用法总结

  • npm 加载资源网址,如下所示:

      https://cdn.jsdelivr.net/npm/包名@版本号/目录
    
  • 官网示例,如图所示:

    在这里插入图片描述

    注意:

    ​ // 打开目录(后面的 " / " 是必要的,否则,无法打开)

    ​ https://cdn.jsdelivr.net/npm/jquery/

GitHub 的使用

  • 打开模块所在目录,如图所示:

    在这里插入图片描述

  • github 加载资源的用法,如下所示:

      https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录
    
  • 官网示例,如图所示:

    在这里插入图片描述

WordPress 的使用

  • 加载任何插件从 WordPress.org 插件 SVN repo,如下所示:

      https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file
    
  • 加载精确版本,如下所示:

      https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js
    
  • 加载最新版本,如下所示

      https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js
    

    注意:

    ​ 生产版本,不推荐使用

  • WordPress.org 的主题 SVN repo 加载任何主题,如下所示:

      https://cdn.jsdelivr.net/wp/themes/project/version/file
    
  • 加载精确版本,如下所示:

      https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js
    
  • 官网示例,如图所示:

    在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
引用\[1\]:在进行HTML理论学习Vue时,出现了如标题所示的报错 GET https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js net::ERR_CONNECTION_ 解决方法 1.前往官网下载vue.js源码文件 。 引用\[2\]:报错原因是没有找到样式文件;有可能是引入的资源失效了;所以得重新引入一下资源;我用的是vant所以进入以下网址找到对应版本的CSS文件导入代码辅助到项目中vant - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers 。 问题:https://cdn.jsdelivr.net/npm/vue 过期 回答: 根据您提供的信息,报错信息是GET https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js net::ERR_CONNECTION_,这个错误通常是由于无法连接到指定的资源引起的。解决这个问题的方法有两种。第一种方法是前往Vue官网下载vue.js源码文件,然后将其引入到您的项目中。第二种方法是检查您引入的资源是否失效,有可能是资源链接过期了。您可以尝试重新引入资源,或者找到对应版本的CSS文件并将其导入到您的项目中。如果您使用的是vant库,您可以访问vant的官方网站,找到对应版本的CSS文件,并将其引入到您的项目中。希望这些解决方法能够帮助您解决问题。 #### 引用[.reference_title] - *1* [GET https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js net::ERR_CONNECTION_](https://blog.csdn.net/qq_22841387/article/details/125115602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [解决报错:GET https://cdn.jsdelivr.net/npm/vant@3/lib/index.css net::ERR_NAME_NOT_RESOLVED](https://blog.csdn.net/qq_41812381/article/details/124725083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值