vite-plugin-oss-cdn

将项目中打包后生产文件上传到 Ali OSS，除了 html 以外

功能特性

• 兼容vite 4.x 和 5.x 版本
• 默认跳过已存在的文件（不会下载文件），加快上传速度
• 几乎零配置，使用 vite outDir 路径，上传到 oss 的相同路径中

除了所有 html 文件以外，上传所有文件。因为 html 文件没有哈希值，且通常放在服务器上

安装

pnpm i vite-plugin-oss-cdn -D

或者

yarn add vite-plugin-oss-cdn -D

或者

npm i vite-plugin-oss-cdn -D

基本使用

1. 在 vite.config.js 中注册本插件
2. 设置 base 开发或生产环境服务的公共基础 URL 路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginOssCdn from 'vite-plugin-oss-cdn'

const options = {
  region: '<Your Region>'
  accessKeyId: '<Your Access Key ID>',
  accessKeySecret: '<Your Access Key Secret>',
  bucket: '<Your Bucket>'
}

// https://vitejs.dev/config/
export default defineConfig({
  base: 'https://foo.com/', // 必须是 URL
  plugins: [vue(), vitePluginOssCdn(options)]
})

2. 打包发布生产代码

pnpm run build

插件将会在打包完成后，上传 vite 配置 outDir 路径下的所有资源文件。

配置项

| options | description | type | default | |-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|----------------| | region | 阿里云 oss 地域 | string | | | accessKeyId | 阿里云 oss 访问 ID | string | | | accessKeySecret | 阿里云 oss 访问密钥 | string | | | bucket | 阿里云 oss 存储空间名称 | string | | | overwrite | 如果文件已存在，是否覆盖 | boolean | false | | ignore | 文件忽略规则。如果你使用空字符串 ''，将不会忽略任何文件 | boolean | '**/*.html' | | headers | 请求头设置，详细信息请见 https://www.alibabacloud.com/help/zh/doc-detail/31978.html | object | {} | | test | 仅测试路径，不会有文件上传 | boolean | false | | rmdir | 删除指定目录，因每次打包后dist目录下静态资源上传oss，久而久之文件会越来越多导致占用大量空间，所以想每次先删除对应环境下静态资源后再上传最新的，永久保持一份节省宝贵空间注：官方原文 -> 如果您需要删除所有前缀为src的文件，则设置为src。设置为src后，所有前缀为src的非目录文件、src目录以及目录下的所有文件均会被删除。如果您仅需要删除src目录及目录下的所有文件，则设置为src/ | string | | | rmdirCount | 删除目录次数，默认1次，需传递rmdir才会生效（内部会删除目录下rmdirCount*1000个文件，阿里云删除文件每次最大1000个） | number | 1 | | mode | 环境集合，符合匹配的才会上传静态资源，内部默认['production'] | array | ['production'] | | branch | 需要上传打包后静态资源的分支，检测当前环境下分支是否匹配（mode需要先匹配），防止本地build后覆盖线上产生重大问题，传参会校验符合才会上传，未传参时都会上传（小心本地覆盖线上） | array | [] | | ... | 其他初始化 oss 的参数，详细信息请见 https://www.alibabacloud.com/help/zh/doc-detail/64097.html | any | |