在项目根目录创建阿里oss相关的js文件,如下
module.exports = {
region: 'oss-cn-hongkong', // 例如:oss-cn-hangzhou
accessKeyId: 'xxxx',
accessKeySecret: 'xxx',
bucket: 'xxx'
}
然后在vue.config.js导入相关包文件
const WebpackAliyunOss = require("webpack-aliyun-oss"); // 引入webpack-aliyun-oss,如果找不到包,就先npm安装
const Oss = require('./oss.config.js');//阿里云配置文件
在configureWebpack中如下修改,在该方法内可以自行添加环境判断
configureWebpack: config=>{
let webpackAliyunOss = [
new WebpackAliyunOss({
from: ['./dist/**'], // 上传那个文件或文件夹 可以是字符串或数组
dist: "/", // 需要上传到oss上的给定文件目录
region: Oss.region,
accessKeyId: Oss.accessKeyId,
accessKeySecret: Oss.accessKeySecret,
bucket: Oss.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 ];
}
评论