OSS Publish Webpack Plugin

A webpack(V3/V4) plugin for publish vue project to
Aliyun OSS, Qiniu Kodo and TencentCloud COS.

Install

npm i --save-dev oss-publish-webpack-plugin

Usage

该插件可以帮助你在完成前端单页面应用项目在完成编译打包后，将 dist 目录中的内容发布到云计算运营商的对象存储桶（空间）中，点此 查看 目前已支持（和计划支持）的云计算运营商情况。

1. webpack.config.js 配置

下面仅为示例代码，具体详细描述查看下文 构造方法参数描述

const OSSPublishPlugin = require('oss-publish-webpack-plugin')
module.exports = {
  // ......
  plugins: [
    // ...... 等其他webpack插件
    new OSSPublishPlugin({
      // 构造方法配置参数, 下面仅为示例，具体描述见后面构造方法参数描述
      provider: 'qiniu',
      providerConfig:  {
        region: 'Zone_z2',
        accessKey: 'P********************b',
        secretKey: 'd********************A',
        bucket: '{bucketName}'
      },
      autoPublish: true,
      clearPrefixList: ['static/css', 'static/js', 'static/img']
    })
  ]
}

2. vue.config.js 配置（基于 webpack-chain ）

下面仅为示例代码，具体详细描述查看下文 构造方法参数描述

const OSSPublishPlugin = require('oss-publish-webpack-plugin')
module.exports = {
  // ......
  chainWebpack: config => {
    // ......其他 config 定义逻辑, 
    // Tips: chain-webpack模式支持通过逻辑代码根据当前环境使用对应的发布配置
    config.plugin('oss-plugin').use(OSSPublishPlugin, [{ 
      provider: 'qiniu',
      providerConfig:  { /** ...同上 */ },
      autoPublish: true,
      clearPrefixList: ['static/css', 'static/js', 'static/img']
    }])
  }
}

Options

以下具体介绍 oss-publish-webpack-plugin 支持的构造方法参数

参数名	描述	类型	默认值
provider	云计算运营商标识（详见下文 provider 介绍）	String	'aliyun'
providerConfig 重要	运营商SDK对应工具方法的配置对象（详见下文 providerConfig 介绍）	Object	--
clearPrefixList	每次上传文件前需要清空存储桶中文件前缀，如果不传或空数组则代表不需要清空	Array	[]
autoPublish	是否无需命令行询问直接在编译后上传云端, true表示直接上传，false则需要询问后发布	Boolean	false
answer	当 autoPublish 为false时，定义发布前命令行询问后填写的正确回复选项，输入数组内任一值都允许发布	Array	['y','Y','yes']
thread	定义最多支持同时执行的上传任务数，性能和网速越强，数额可以设置越大，建议取数在 1~10之间	Number	5

provider 云计算运营商标识

运营商名称	标识	状态	支持日期
阿里云 OSS	aliyun	V0.3.0 已支持	2022-12-27
七牛云 Kodo	qiniu	V0.9.0 已支持	2022-12-28
腾讯云 COS	tencent	v1.2.0 已支持	2022-12-29
华为云 OBS	huaweicloud	v1.4.0 已支持	2023-01-16
亚马逊云 S3	aws	v1.5.0 BETA	2023-01-17

providerConfig 对象存储配置详述

1. 阿里云 OSS

参数名	类型	描述
region	String	存储桶所在地域名称，以华东1（杭州）为例，Region填写为oss-cn-hangzhou，点击查看公共云下OSS Region详细对照表
accessKeyId	String	阿里云账号的accessKeyId。注意：阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户
accessKeySecret	String	阿里云账号的accessKeySecret
bucket	String	存储桶的名称

2. 七牛云 Kodo

参数名	类型	描述
region	String	存储空间所在地域标识：华东 Zone_z0、 华北 Zone_z1、 华南 Zone_z2 和 北美 Zone_na0
accessKey	String	七牛云账号的accessKey
secretKey	String	七牛云账号的secretKey
bucket	String	存储空间的名称

3. 腾讯云 COS

参数名	类型	描述
region	String	腾讯云存储桶托管机房分布地区的地域标识，以广州为例，Region填写为ap-guangzhou，点击查看公有云地域列表
secretId	String	腾讯云账号的secretId
secretKey	String	腾讯云账号的secretKey
bucket	String	存储桶的名称

4. 华为云 OBS

参数名	类型	描述
server	String	华为云存储桶地域标识（EndPoint），在存储桶 -> 概览 -> 基本信息 中即可查到 EndPoint
access_key_id	String	华为云账号的访问密钥ID
secret_access_key	String	华为云账号的访问密钥
bucket	String	存储桶的名称

5. AWS S3

参数名	类型	描述
region	String	亚马逊云存储空间服务所在地域标识（EndPoint），点此查看AWS服务端点列表
accessKeyId	String	亚马逊云账号的访问密钥ID
secretAccessKey	String	亚马逊云账号的访问密钥
bucket	String	存储桶的名称

Guide

阿里云OSS存储桶配置引导

• 查看阿里云 教程示例：通过静态网站托管部署单页应用

七牛云kodo存储桶配置引导

• 查看七牛云 静态页面管理 引导说明 【温馨提示：本插件会将编译打包后的 dist 目录中 index.html 文件复制出一个新的文件并命名为 errno-404，同时会一并上传到七牛云存储空间，不需要开发者再单独操作】

腾讯云COS存储桶配置引导

• 查看腾讯云 使用 COS 静态网站功能搭建前端单页应用
• 查看搭建前端单页应用过程中的 常见问题

华为云OBS存储桶配置引导

• 查看华为云 使用自定义域名托管静态网站最佳实践
• 注意：默认404错误页面这里需要也配置为： index.html

亚马逊云 S3 存储桶配置引导

验证中，后续补充...