vue自动化部署阿里云oss打包上传

1.引入阿里云 webpack-aliyun-oss

yarn add webpack-aliyun-oss -D

2.根目录新建oss.config.js并配置如下

module.exports = {
   region: '你的oss服务器区域', 
   accessKeyId: '你的accessKeyId',   
   accessKeySecret: '你的accessKeySecret',  
   bucket: '你的bucket' 
}

3.vue.config.js中配置打包设置

const WebpackAliyunOss = require("webpack-aliyun-oss"); // 引入webpack-aliyun-oss
const Oss = require('./oss.config'); // 引入刚刚创建的oss.config.js文件
module.exports = {
  configureWebpack: (config) => {
    // 打包上传oss
    let webpackAliyunOss = [
      new WebpackAliyunOss({
        from: "./dist/**", // 上传那个文件或文件夹  可以是字符串或数组
        dist: "h5/",  // 需要上传到oss上的给定文件目录
        region: Oss.region,
        accessKeyId: Oss.accessKeyId,
        accessKeySecret: Oss.accessKeySecret,
        bucket: Oss.bucket,
        test: true,
        setOssPath: filePath => {
          let index = filePath.lastIndexOf("dist");
          let Path = filePath.substring(index + 4, filePath.length);
          return Path.replace(/\\/g, "/");
        },
        setHeaders: filePath => {
          return {
            "Cache-Control": "max-age=31536000"
          };
        }
      })
    ];
    config.plugins = [...config.plugins, ...webpackAliyunOss];
  },
};

插件配置说明

from: 上传哪些文件，支持类似gulp.src的glob方法，如'./build/**', 可以为glob字符串或者数组。
作为插件使用时：可选，默认为output.path下所有的文件。
独立使用时：必须，否则不知道从哪里取图片：）
dist: 上传到oss哪个目录下，默认为oss根目录。可作为路径前缀使用。
region: 阿里云上传区域
accessKeyId: 阿里云的授权accessKeyId
accessKeySecret: 阿里云的授权accessKeySecret
bucket: 上传到哪个bucket
timeout: oss超时设置，默认为30秒(30000)
verbose: 是否显示上传日志，默认为true
deletOrigin: 上传完成是否删除原文件，默认false
deleteEmptyDir: 如果某个目录下的文件都上传到cdn了，是否删除此目录。deleteOrigin为true时候生效。默认false。
setOssPath: 自定义上传路径的函数。接收参数为当前文件路径。不传，或者所传函数返回false则按默认路径上传。(默认为output.path下文件路径)
setHeaders: 配置headers的函数。接收参数为当前文件路径。不传，或者所传函数返回false则不设置header。
test: 测试，仅显示要上传的文件，但是不执行上传操作。