vite-plugin-cos-cdnizer

在日常开发中，经常需要将静态资源上传到云服务的对象存储中。传统方式需要开发者手动登录云服务器控制台进行上传，步骤繁琐。

使用本插件后，只需要将静态资源放置在项目本地，插件将自动将命中的资源上传到对象存储中。同时，插件会自动将代码中的 import xxx from 'xxx.png' 替换为 CDN 地址，简化开发流程。

安装

npm install vite-plugin-cos-cdnizer -D

基本使用

import { defineConfig } from 'vite';
import cdnizer from 'vite-plugin-cos-cdnizer';

export default defineConfig({
	plugins: [
		cdnizer({
			secretId: 'yourSecretId',
			secretKey: 'yourSecretKey',
			bucket: 'yourBucket',
			region: 'yourRegion',
			domain: 'yourCustomCDNDomain'
		})
	]
});

效果展示

插件会自动将本地引入的静态资源上传至 CDN，并替换原有代码中的引用地址为 CDN 地址。

使用前

使用后

插件会自动创建 .cache.json 文件进行记录，以减少无用的重复上传。

参数配置

参数名	类型	描述	默认值	必填
secretId	string	身份密钥 ID	-	是
secretKey	string	身份密钥 Key	-	是
bucket	string	存储桶的名称	-	是
region	string	存储桶所在地域	-	是
domain	string	自定义 CDN 域名	${bucket}.cos.${region}.myqcloud.com	否
uploadPath	string	自定义上传路径	${projectName}/${fileName}	否
include	string[] 或 (path: string) => boolean	自定义命中文件规则	['.png', '.jpg', '.jpeg', '.svg', '.gif']	否
enableMD5FileName	boolean	是否对上传的文件名称进行 MD5 编码	true	否
enableCache	boolean	是否缓存已上传文件	true	否