1.安装 webpack-aliyun-oss
1 | npm install webpack-aliyun-oss -D |
2.在根目录新建oss.config.js
至于oss的配置项,请自行百度创建
1
2
3
4
5
6
7 module.exports = {
// 例如:oss-cn-beijing
region: '你的oss服务器区域,
accessKeyId: '你的accessKeyId',
accessKeySecret: '你的accessKeySecret',
bucket: '你的bucket'
}
3.对vue.config.js进行配置
1 | // vue.config.js |
4.插件配置选项
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: 测试,仅显示要上传的文件,但是不执行上传操作。默认false