- 新建一个 git 仓库用来存放静态资源，最终把本地资源放到 GitHub 的一个仓库上。
- 发布一版release包
- 通过
jsDelivr引用 GitHub 资源的方法：
⬇️
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<发布版本号>/<文件路径>
我们访问下试试
- 注意：版本号不是必需的，只是为了区分新旧资源；如果不使用版本号，将会直接引用最新资源。除此之外还可以使用某个范围内的版本，查看所有资源等，具体使用方法如下：
加载任何 Github 的发布(release)、提交(commit)或分支(branch)
https://cdn.jsdelivr.net/gh/<user>/<repo>@<version>/<file>
比如加载 jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js完全省略版本或者使用
@latest以获取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js将
.min添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js在末尾添加
/以获取资源目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/
放到自己的 cdn 供项目使用的，通常是不怎么变动的静态资源。比如本地化后经过配置的插件/第三方库、图标、字体等。
js 和自定义的 css 之类则修改几率较高，变动后文件名的 hash 值也变了，就不能很好地利用缓存。而具体如何使用这些 cdn 链接。有几种场景：
第一种：将插件集成到项目，直接看 vue3 集成 tinymce 及自定义皮肤
第二种：放到
public/index.html的 head 或 body 内。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
...
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
- 第三种：在(生产环境)打包的时候配置访问 cdn 前缀，将打包出来的这个资源传到 cdn 后删除本地这份。下面以谷歌字体为例：
roboto-fontface 外链加载太慢，我直接下载了这个包在main.js引入：
// src/main.js
import 'roboto-fontface/css/roboto/roboto-fontface.css'
然后在vue.config.js内配置：
// vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = defineConfig({
// 一般不太会把整个 dist 目录放 cdn，建议只放变动频率低的本地化资源
// 很少这样配置
// publicPath:
// IS_PROD
// ? 'https://cdn.jsdelivr.net/gh/aizawasayo/cdn-animal-home/dist/'
// : '/',
chainWebpack: config => {
if (IS_PROD) {
config.module
.rule('fonts')
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i) // 匹配这些后缀的文件
.set('type', 'asset') // 设置处理类型为静态资源
.set('generator', {
filename: `fonts/[name].[hash:8][ext]`, // 打包时输出到 dist/fonts/目录下
publicPath:
'https://cdn.jsdelivr.net/gh/aizawasayo/cdn-animal-home/dist/', // 访问前缀
})
}
},
})
这样我们打包出来的文件用到字体的地方前缀都会被替换成 cdn 地址了：
