vue3+element-plus配置cdn

最近在做一个项目，项目配置版本如下：

下面分享一下，如上配置的 vue3 项目，如何配置 cdn 加速

介绍下常见的免费 cdn 网站

BootCDN 和 Staticfile CDN 简单明了的搜索方式就不说了，这里讲一下 UNPKG 搜索 cdn 资源的方式。

cdn 文件路径格式： https://unpkg.com/:package@:version/:file

路径解析如下图：

直接使用资源名后面加 / ，可以查看文件夹目录，比如： https://unpkg.com/browse/axios@0.21.4/ ，复制进浏览器地址栏，可看见如下目录：

按如下配置，操作方式基本一样，文件的 cdn 版本自行替换。

vue.config.js

index.html

在 head 标签里加上如下：

在 body 标签里加上如下：

main.ts

确实配了 cdn 后打包文件小了很多，不过如果 cdn 挂了，你的项目也就挂了。

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

打开阿里云控制台，点击CDN控制台，再点击“添加加速域名”，如下图

添加要加速的域名

选择要加速的资源类型，如果是博客网站，选择“图片小文件”

选择源站类型

指图片小文件的获取方式，通过OSS域名、IP、或源站域名访问

在域名管理后台，添加CNAME记录

在CDN域名列表中，点击“管理”，如下图

在列表中，点击“复制CNAME”

在域名管理后台中，添加一条CNAME记录

记录值就是上面复制的

---