vue2或vue3项目打包自动部署到oss服务器
vue项目打包自动部署到oss服务器
·
为了提高页面访问速度,使用了CDN加速,这里记录的是前端如何打包自动部署到oss。
-
安装依赖
npm install webpack-aliyun-oss
-
在vue.config.js配置oss
module.exports = {
configureWebpack: config => {
let webpackAliyunOss = [
new WebpackAliyunOss({
from: ['./dist/**'], // 上传那个文件或文件夹 可以是字符串或数组
dist: "/test", // 需要上传到oss上的给定文件目录
region: "oss.region值",
accessKeyId: "oss.accessKeyId值",
accessKeySecret: "oss.accessKeySecret值",
bucket: "oss.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: filePath => {
// some operations to filePath
// return false to use default header
return {
"Cache-Control": "max-age=31536000"
};
}
})
];
config.plugins = [...config.plugins, ...webpackAliyunOss ];
//如果这是configureWebpack: config里的最后一行家“;”,否则不用加。
}
}
更多推荐
所有评论(0)