前言
该文章主要针对VUE技术栈哈，其它的可能暂不支持。
为什么会写这篇文章？其实是之前公司主要写H5，写的特别多，项目打包文件也是放在阿里云的对象存储 OSS，而每次都需要自己手动打包上传，而且还需要手动删除之前的文件，否则上传后，文件名无法全部覆盖，导致目录文件越来越多，所以就有了这个阿里云自动打包上传的想法。经过后面百度，最终使用了webpack-aliyun-oss组件
安装
npm i webpack-aliyun-oss -D
使用
- 首先新建一个
oss.config.js配置文件
module.exports = {
region: 'oss-cn-shenzhen', // 阿里云上传区域
accessKeyId: '***************', // 阿里云的授权accessKeyId
accessKeySecret: '***************', // 阿里云的授权accessKeySecret
devBucket: '***************', // 上传到哪个bucket(测试环境)，这个可以自行添加
proBucket: '***************' // 上传到哪个bucket(生产环境)
}
参数查找
region根据地域来的，深圳就是oss-cn-shenzhen、北京就是oss-cn-beijing等，以此类推
bucket就是从Bucket列表中选择对应的Bucket名称，比如上图的就是ease-choose，不同环境可能有不同的Bucket名称，这个看你自己的需求选择就行
accessKeyId和accessKeySecret在上图中查找，不存在直接创建即可
为保证安全，记得保管好oss.config.js文件，防止泄露
- 在
vue.config.js引入使用，若无该文件，自行创建
const oss = require("./oss.config"); //引入oss配置
const WebpackAliyunOss = require("webpack-aliyun-oss");
在plugins中新增一个WebpackAliyunOss对象
plugins: [
new WebpackAliyunOss({
from: "./dist/**", //上传的文件或目录
dist: "salad-mobile", //上传到oss的指定目录
region: oss.region,
accessKeyId: oss.accessKeyId,
accessKeySecret: oss.accessKeySecret,
bucket: process.env.NODE_ENV == 'development' ? oss.devBucket : oss.proBucket,
test: true, // 测试只显示上传文件，不上传文件动作
overwrite: true, // 为 false 即忽略oss同名文件
setOssPath: filePath => { // 需要设置自定义上传路径使用该函数
let index = filePath.lastIndexOf("dist");
let Path = filePath.substring(index + 4, filePath.length);
return Path.replace(/\\/g, "/");
},
setHeaders: filePath => { // 如果想定义header就传
return {
"Cache-Control": "max-age=31536000"
};
}
}
]
注意
项目启动时可能就直接打包上传了，所以在本地开发时可以配置test的值判断是否上传
