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 filePathlet 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 headerreturn {"Cache-Control": "max-age=31536000",};},}),];config.plugins = [...config.plugins, ...webpackAliyunOss];//如果这是configureWebpack: config里的最后一行家“;”，否则不用加。},
};