首先

我们公司是没有运维的，导致我们部署项目一直是手动的形式。
好比如说我们前端部署需要自行在阿里云oss服务器手动删除原有文件并上传最新的dist文件夹。
最近的一段时间我们项目的迭代暂时搁置，达到一个饱和期。这让我可以腾出手来研究这一脚本~

进入正题

一开始没有接触过这些关于部署的操作，前期也是各种百度。
终于让我找到了一个相关依赖并加以测试：aliyunoss-webpack-plugin
依赖相关介绍地址：www.npmjs.com/package/ali…

了解到有两种写法：依赖于webpack以及不依赖于webpack
再三考虑采用了不依赖于webpack的方式，这样我们可以单独拿出一个js文件来操作oss。

实现代码

const oss = require('ali-oss');
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin');

/* 
 * 阿里云oss连接信息
 * 具体填写自己阿里云oss服务器的信息即可
 */
const ossConfig = {
    region: '****',
    accessKeyId: '****',
    accessKeySecret: '****',
    bucket: '****',
}

// 递归 上传之前删除oss服务原有文件
const deletAll = async (store) => {
    // 上传之前删除oss文件 避免文件重复共存
    const fileList = await store.list();
    const files = [];
    if (fileList.objects) {
        fileList.objects.forEach((file) => {
            files.push(file.name);
        })
        await store.deleteMulti(files, {
            quiet: true
        });
        console.log("删除oss服务文件中...");
        deletAll(store)
        // 此时oss无任何原本文件
    } else {
        console.log("当前oss服务已无文件");
        console.log("开始上传dist文件");
        const autoUpload = new AliyunossWebpackPlugin({
            buildPath: 'dist/**',
            region: ossConfig.region,
            accessKeyId: ossConfig.accessKeyId,
            accessKeySecret: ossConfig.accessKeySecret,
            bucket: ossConfig.bucket,
            deleteAll: true,
            generateObjectPath: (filename, file) => file.replace(/dist\//, '')
        })

        autoUpload.apply();
        console.log("上传/部署完毕...");
    }
}


(() => {

    const store = oss({
        region: ossConfig.region,
        accessKeyId: ossConfig.accessKeyId,
        accessKeySecret: ossConfig.accessKeySecret,
        bucket: ossConfig.bucket,
        internal: ossConfig.internal ? true : false,
    })
    deletAll(store);

})();

我们可以看到并没有直接上传，而是先删除oss原有文件，在上传我们的dist文件。

还有我们代码片段里用到了 deleteAll() 方法。
aliyunoss-webpack-plugin 本身是有deleteAll选项的。

但是经过反复测试上传到oss服务器后，我们的js文件是会重复共存的。
排查不上具体原因，aliyunoss-webpack-plugin 本身的deleteAll参数没有生效。
最后通过ali-oss依赖，在进行上传之前我们先删除oss服务上面文件解决这一问题。

为什么要用递归的方式来删除？

初次删除oss时候发现每次只能删除100个文件，造成了不完全删除。 所以问题就呈现出来了。
每次要删除oss文件的时候我并不知道具体有多少文件，数量是活的。 恰好我们可以根据

 const fileList = await store.list();
 if (fileList.objects) {
     // oss服务有文件
 } else {
     // oss服务已无文件
 }

来判断出我们的oss服务器上是否有无文件

启动脚本

我个人呢把这个文件放在了我vue项目的根目录下，命名为 oss.js
单纯的把dist部署到oss服务器上可以直接在终端运行 node oss.js 当然这太麻烦了，我是很讨厌麻烦的~ 直接在package.json里添加一个脚本命令

"deploy": "vue-cli-service build && node oss.js"

输入 npm run deploy 就可以一次性完成我们所需工作：打包->部署

最后

第一次写文章，希望可以帮助到有类似需求的童鞋