Vue CLI 3 中封装 AliOSS 图片上传组件并发布到 npm

Vue CLI 3 提供了lib模式，可以方便地将组件封装为一个可重用的库。本文将指导您如何使用该模式封装一个 AliOSS 图片上传组件并将其发布到 npm。

构建项目结构

首先，按照 Vue CLI 3 官方指南创建一个新项目。然后，修改目录结构如下：

├── components
│  └── alioss-image-uploader.vue
├── examples
│  └── main.js
├── vue.config.js
└── ...

创建 AliOSS 图片上传组件

在 components/alioss-image-uploader.vue 中，创建 Vue 组件：

<template>
  <input type="file" @change="handleFileChange" />
</template>

<script>
import { ref } from 'vue'
import OSS from 'ali-oss'

export default {
  setup() {
    const file = ref(null)
    const client = new OSS({
      accessKeyId: 'your-access-key-id',
      accessKeySecret: 'your-access-key-secret',
      region: 'your-region',
      bucket: 'your-bucket-name',
    })

    const handleFileChange = async e => {
      if (!e.target.files[0]) return
      const file = e.target.files[0]
      const res = await client.put(file.name, file)
      // 上传成功，处理返回结果
    }

    return { file, handleFileChange }
  }
}
</script>

配置 Vue CLI

在 vue.config.js 中，配置 lib 模式：

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default',
      library: 'alioss-image-uploader',
      libraryTarget: 'umd',
    },
  },
}

构建和发布组件

运行以下命令构建和发布组件：

npm run build
npm publish

SEO 文章

SEO 关键词