oss插件

• 一般都需要把静态资源上传到oss，加速访问以及减少包的体积大小
  • 图片、图标、css、js
• 而每次都需要手动上传到oss，会比较繁琐，可以通过插件来实现自动化上传到oss

社区插件

• vite-oss-upload

实现步骤

• 1、创建oss客户端
• 2、配置oss相关参数
  • accessKeyId: 阿里云的 AccessKey ID，用于标识用户身份，具有操作 OSS 的权限
  • accessKeySecret: 阿里云的 AccessKey Secret，是与 AccessKey ID 配套使用的密钥，用于签名和加密请求
  • bucket: OSS 的存储空间名称
  • region: OSS 的存储空间所在的地域
• 3、遍历打包后的文件，对每个文件生成哈希码作为文件名，并将文件上传到 OSS
• 4、在构建过程中替换资源引用为 OSS 地址
  • 这样就无需手动替换资源地址了

js

const { createReadStream } = require('fs');
const { createClient } = require('aliyun-sdk');
const { createHash } = require('crypto');

export default function ossPlugin(options) {
  return {
    name: 'oss-plugin',
    apply: 'build',
    async generateBundle(outputOptions, bundle) {
      const ossClient = createClient({
        accessKeyId: options.accessKeyId,
        accessKeySecret: options.accessKeySecret,
        bucket: options.bucket,
        region: options.region,
      });

      const files = Object.values(bundle).filter((file) => !file.isAsset);
      const promises = files.map(async (file) => {
        const fileContent = await file.generate({ format: 'es' });
        const hash = createHash('md5').update(fileContent.code).digest('hex');
        const fileName = `${file.name}-${hash}.${file.type}`;

        // Upload file to OSS
        const result = await ossClient.putObject({
          Bucket: options.bucket,
          Key: fileName,
          Body: createReadStream(file.fileName),
        });

        console.log(`Uploaded ${fileName} to OSS: ${result.res.statusMessage}`);
      });

      await Promise.all(promises);
    },
   transform(code, id) {
      // 匹配资源引用路径并替换为 OSS 地址
      return code.replace(/'\/static\//g, `'${options.ossBaseUrl}/static/`);
    },
  };
}