oss-publish-webpack-plugin v1.5.1

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

该插件可以帮助你在完成前端单页面应用项目在完成编译打包后，将 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']
    }])
  }
}

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

provider 云计算运营商标识

providerConfig 对象存储配置详述

1. 阿里云 OSS

2. 七牛云 Kodo

3. 腾讯云 COS

4. 华为云 OBS

5. AWS S3

阿里云OSS存储桶配置引导

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

七牛云kodo存储桶配置引导

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

腾讯云COS存储桶配置引导

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

华为云OBS存储桶配置引导

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

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

验证中，后续补充...