vue 打包上传 阿里云 oss

前言

该文章不做太多的细节讲解-只为大家快速配置对应的 vite 配置文件

这里主要介绍下我自认为比较好用的两个vite 上传组件

vite-plugin-upload-oss 参考连接

vite-plugin-ali-oss-uploader 参考连接

接下来我所上传的只针对 阿里云

import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig } from 'vite'
import ALY from 'aliyun-sdk' 
import OssUploadStream from 'aliyun-oss-upload-stream'
import { aliossPlugin } from '@jomsou/vite-plugin-upload';
export default defineConfig(({ command, mode })=> {

    if(command === 'serve'){
        return {
            base: './',
            plugins: [vue()],
            optimizeDeps: {
                  include: ['schart.js']
            }
          }
    }else{
        /**
         * build 上传oss
         */
         return {
            base: 'https://morefun-bucket.oss-cn-beijing.aliyuncs.com/new-retail/pandora/memberImg/dist/',
            plugins: [vue(),
              aliossPlugin({
                sdk: ALY,
                region: '',
                accessKeyId: '',
                secretAccessKey: '',
                endpoint: ,
                bucket: '',
                remoteFilePath:'',
                openConfirm: false,
                filePath: path.resolve(__dirname, 'dist/'),
                ossUploadStream: OssUploadStream
              })         
            ],
            optimizeDeps: {
                  include: ['schart.js']
            }
          }

    }

  })

上面的参数在参考连接里基本都有注释，这里就懒得写了

注：这里重点介绍下 endpoint 这个参数

比如你的oss连接为

https://XXXXXXXXX.oss-cn-hangzhou-internal.aliyuncs.com/a/b/c.jpg;
那么
endpoint:"https://oss-cn-hangzhou-internal.aliyuncs.com/";
bucket:"XXXXXXXXX"

其他的该怎么配置就怎么配置就可以了

第二种 vite-plugin-ali-oss-uploader

这个相对于比较简单配置， 这里你直接可以按照实例的来跑

只改了setOssPath 返回回调，其他都没动，很方便

import uploader from 'vite-plugin-ali-oss-uploader';

export default defineConfig({
  plugins: [
    {
      ...uploader({
        from: ['./build/**', '!./build/**/*.html'],
        dist: 'path/in/alioss',
        buildRoot: path.resolve(__dirname, 'dist'),
        region: 'your region',
        accessKeyId: 'your key',
        accessKeySecret: 'your secret',
        bucket: 'your bucket',

        // 想自定义上传路径就传
        // 否则按`buildRoot`指定目录的文件结构上传
        setOssPath(filePath) {
           let index = filePath.lastIndexOf("dist");
           let Path = filePath.substring(index + 4, filePath.length);
           return Path.replace(/\\/g, "/");
        },

        // 想自定义header就传
        setHeaders(filePath) {
          // some operations to filePath
          return {
            'Cache-Control': 'max-age=31536000'
          }
        }
      }),
      apply: 'build', // 只在 build 模式启用
      enforce: 'post' // 在 Vite 构建插件之后调用该插件
    }
  ]
})

```

总结：

 个人比较喜欢 第一种，配置简单明了
 
 都是懒人 偷懒搞的， 欢迎大家一起偷懒