vue3+element-plus配置cdn

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3+element-plus配置cdn相关的知识,希望对你有一定的参考价值。

参考技术A

最近在做一个项目,项目配置版本如下:

下面分享一下,如上配置的 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

往期文章

个人主页

以上是关于vue3+element-plus配置cdn的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0+ts+element-plus多页签应用模板:如何优雅地使用Svg图标

Vue3基于element-plus的分页器实现

vue3项目起步之代码规范,element-plus axios集成

vue3 + typescript + axios封装(附带loading效果,...并携带跨域处理,...element-plus按需引入)

在Vue3+ElementPlus中,配置按需导入后,以服务的方式调用ElLoading,但页面中不显示

vue3.0+ts+element-plus多页签应用模板:侧边导航菜单(下)