2021-05-23 18:36:46

VUE项目build后直接上传阿里OSS

在项目根目录创建阿里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 ];
 }

本文链接:https://zk1006.com/archives/24.html

评论