在前端开发中，我们常常需要将静态资源部署到 CDN 上，以实现资源的快速加载和加速服务的访问速度。而 fis3-deploy-cdn-qn 就是一款用来将静态资源上传到七牛 CDN 上的 FIS3 插件，本文将介绍如何使用该插件。
插件安装
首先，我们需要安装 fis3-deploy-cdn-qn 插件。可以通过 npm 包管理器来进行安装：
npm install fis3-deploy-cdn-qn
安装完成之后，就可以在 FIS3 的配置文件中使用该插件了。
插件配置
为了使用 fis3-deploy-cdn-qn 插件，需要在 FIS3 的配置文件中进行配置。
fis.match('*.js', {
deploy: fis.plugin('cdn-qn', {
// 插件配置项
})
});插件配置项包括以下几个参数：
accessKey：七牛账号的 AccessKey，必填参数。secretKey：七牛账号的 SecretKey，必填参数。bucket：CDN 存储空间，必填参数。domain：CDN 对外提供服务的域名，必填参数。path：上传到 CDN 上的路径，可选参数，默认为根目录。exclude：不上传到 CDN 上的文件，可选参数，默认为空。
插件使用
配置完成之后，就可以使用 fis3 release 命令将静态资源上传到指定的 CDN 上。
fis3 release prod -d ./output
执行上述命令后，插件将自动将指定目录（默认为 ./output）中的资源上传到 CDN 上，相应的路径也会自动替换成 CDN 上的路径。在使用过程中，我们需要注意以下几点：
- 文件的相对路径需要保持一致，方便插件找到对应的文件。
- CDN 上的资源更新可能有一定的延迟，在更新 CDN 资源后，需要等待一定时间才能生效。
示例代码
下面是一个简单的例子，演示了如何使用 fis3-deploy-cdn-qn 插件将静态资源上传到七牛 CDN 上。
-- -------------------- ---- -------
-- -----------
----------------- -
------- -------------------- -
---------- --------------------
---------- --------------------
------- ----------------
------- ----------------
----- -------------
-------- --
--
---
-- ----------
--------- -----
------
------
----- ----------------
---------- ------------
------- ---------------------------------
-------
------
---------- -----------
-------
-------
-- ------
------------------- ---------在上述例子中，我们在 FIS3 的配置文件中使用了 fis3-deploy-cdn-qn 插件将静态资源上传到七牛 CDN 上。在 index.html 文件中，我们引用了被上传到 CDN 上的静态资源（/static/js/app.js），并在控制台输出了一条信息。
总结
本文介绍了如何使用 fis3-deploy-cdn-qn 插件将静态资源上传到七牛 CDN 上。通过配置插件参数，可以方便地进行 CDN 资源部署，并提高网站的访问速度和服务效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005697481e8991b448e4d6f