【源码】基于 Vite 框架的静态资源 CDN 化工具

项目简介

在前端开发中，静态资源的上传管理和 CDN 链接替换工作复杂繁琐。本项目开发的 vite-plugin-cos-cdnizer 插件，基于 Vite 框架，可自动化完成静态资源向云服务对象存储的上传，并自动将代码里相关的资源路径替换成 CDN 地址，极大简化工作流程，提升开发效率。

项目的主要特性和功能

1. 自动上传：自动监测项目中静态资源的变化，将其上传到指定的对象存储。
2. 路径替换：自动把代码里的本地资源路径替换为对应的 CDN 地址。
3. 缓存机制：采用缓存机制，避免重复上传相同文件，仅上传有变动的文件。
4. 灵活配置：支持多种参数配置，包括身份密钥、存储桶名称、地域、自定义 CDN 域名、自定义上传路径等。

安装使用步骤

1. 安装插件

通过 npm 安装 vite-plugin-cos-cdnizer： bash npm install vite-plugin-cos-cdnizer -D

2. 配置插件

在项目的 vite 配置文件中引入并配置插件： ```typescript 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' }) ] }); ```

3. 运行项目

运行 vite 命令行工具启动项目，插件会自动完成静态资源的上传和 CDN 地址的替换。

注：使用本插件需要确保已开通相关云服务的对象存储功能，并获取到相应的身份密钥和存储桶信息。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】