Vue项目使用七牛云CDN存放静态资源

一、方案概论

1.1、背景

自己写的开源项目 --【土拨鼠充电平台】-- 上线之后，访问管理台长达一分钟，查看原因静态资源下载慢。目前采用的花生壳内网穿透方式访问，免费的账户网络存在限制，影响用户使用。考虑采用 cdn 加速静态资源。

七牛云官网链接：七牛云 | 一站式场景化智能音视频 APaaS

1.2、方案介绍

七牛云可以免费存储用户的静态资源（ js/css/图片），我们将静态资源放在七牛云上，通过引用它们，达到不走花生壳网络，提升访问效率。

二、实现方式

2.1、注册七牛云账号

路径：七牛云官网---右上角“立即注册”按钮

按官网要求创建账户，并完成实名验证，才能使用网络存储功能。

2.2、上传资源

第一步：创建对象存储仓库  

在七牛云控制台创建一个存储空间，用于存放静态资源。

路径：进入对象存储后，选择空间管理----新建空间

备注：需写明存储空间名称，存储区域根据所在区域选择

第二步：创建打包好的dist静态资源一样的文件夹

dist文件夹静态资源👇

 

七牛云空间内文件管理👇

第三步：测试静态资源访问路径

备注：把链接放在浏览器中打开，查看是否访问对应内容 

第四步：修改 index.html 中静态资源引用

三、方案验证

3.1、验证 cdn 方案是否成功

将修改后的网站放在本地部署(nginx)之后，浏览器打开网站，查看静态资源是否为七牛云的链接。

注意：使用无痕浏览器，不使用缓存。

最后：👏👏😊😊😊👍👍