vue2或vue3项目打包自动部署到oss服务器

为了提高页面访问速度，使用了CDN加速，这里记录的是前端如何打包自动部署到oss。

1. 安装依赖

npm install webpack-aliyun-oss

2. 在vue.config.js配置oss

module.exports = {
    configureWebpack: config => {
       let webpackAliyunOss = [
      new WebpackAliyunOss({
        from: ['./dist/**'], // 上传那个文件或文件夹  可以是字符串或数组
        dist: "/test",  // 需要上传到oss上的给定文件目录
        region: "oss.region值",
        accessKeyId: "oss.accessKeyId值",
        accessKeySecret: "oss.accessKeySecret值",
        bucket: "oss.bucket桶名称",
        overwrite: true,    // 是否需要覆盖bucket上的同名文件
        // test: true,  
        //上面一行，可以在进行测试看上传路径是否正确, 打开后只会显示上传路径并不会真正上传;
       
        // 因为文件标识符 ""  和 "/" 的区别 不进行 setOssPath配置,上传的文件夹就会拼到文件名上, 丢失了文件目录,所以需要对setOssPath 配置。
        setOssPath: filePath => {
          // some operations to filePath
          let index = filePath.lastIndexOf("dist");
          let Path = filePath.substring(index + 4, filePath.length);
          return Path.replace(/\\/g, "/");
        },
        setHeaders: filePath => {
          // some operations to filePath
          // return false to use default header
          return {
            "Cache-Control": "max-age=31536000"
          };
        }
      })
    ];
    config.plugins = [...config.plugins, ...webpackAliyunOss ];
//如果这是configureWebpack: config里的最后一行家“;”，否则不用加。
    }
}