vue + js 项目打包JS、CSS文件自动部署到oss

一、下载oss依赖

npm install webpack-aliyun-oss
或
yarn add webpack-aliyun-oss

二、在vue.config.js中配置文件

const WebpackAliyunOss = require("webpack-aliyun-oss");

let VUE_APP_BUCKET = "xxx";
let VUE_APP_REGION = "xx-xxx-xxx";

module.exports = {
  configureWebpack: (config) => {
    let webpackAliyunOss = [
      new WebpackAliyunOss({
        from: ["./dist/css","./dist/js","!./dist/**/*.html"],//排除html文件, 上传那个文件或文件夹  可以是字符串或数组
        dist: "/test/", // 需要上传到oss上的给定文件目录
        region: VUE_APP_REGION,
        accessKeyId: "your accessKeyId",
        accessKeySecret: "your accessKeySecret",
        bucket: VUE_APP_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: (file_Path) => {
          // some operations to file_Path
          // return false to use default header
          return {
            "Cache-Control": "max-age=31536000",
          };
        },
      }),
    ];
    config.plugins = [...config.plugins, ...webpackAliyunOss];
    //如果这是configureWebpack: config里的最后一行家“;”，否则不用加。
  },
};