Vue.js能否实现将数据写入AWS S3存储桶内的文件？

方案1：本地存储到Vue项目public文件夹 #

该方案适合静态固定、不需要运行时动态更新的数组数据，部署后所有访问者拿到的是同一份数据。

• 第一步：组合字符串生成目标数组
  直接在Vue组件或工具函数中处理字符串组合逻辑，示例代码如下：

// 示例多组原始字符串
const groupA = ['首页', '列表', '我的']
const groupB = ['登录', '注册', '找回密码']
// 组合为新数组并自定义命名
const combinedMenuList = [...groupA, ...groupB]

• 第二步：存储到public文件夹
  如果是构建前就确定的静态数据，直接把组合好的数组转成JSON格式，存为public/combined-data.json即可。
  注意：前端浏览器运行环境没有直接写入项目本地public文件夹的权限，如果是用户使用过程中动态生成的数组，只能触发下载到用户本地设备，或者选择云存储方案。下载示例代码：

const downloadCombinedData = () => {
  const jsonContent = JSON.stringify(combinedMenuList, null, 2)
  const blob = new Blob([jsonContent], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const downloadLink = document.createElement('a')
  downloadLink.href = url
  downloadLink.download = 'combined-menu.json'
  downloadLink.click()
  URL.revokeObjectURL(url)
}

• 第三步：后续访问public中的静态数据
  直接通过相对路径请求即可：

fetch('/combined-data.json')
  .then(res => res.json())
  .then(data => console.log('获取到组合数组：', data))

方案2：存储到AWS S3 #

适合需要动态更新、多端共享访问的数组数据。

• 前置准备：提前在AWS控制台创建S3存储桶，配置CORS规则允许你的Vue应用域名访问，生成拥有S3读写权限的凭证。注意不要把密钥硬编码在前端代码里，生产环境建议通过AWS Cognito或者自有后端接口代理请求，避免密钥泄露。
• 第一步：安装AWS S3依赖

npm install @aws-sdk/client-s3

• 第二步：上传组合数组到S3

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3"

// 初始化S3客户端（仅本地测试用，生产环境不要硬编码密钥）
const s3Client = new S3Client({
  region: '你的S3桶所在区域，比如ap-northeast-1',
  credentials: {
    accessKeyId: '你的AWS AccessKey',
    secretAccessKey: '你的AWS SecretKey'
  }
})

const uploadArrayToS3 = async (arrayData, fileName) => {
  const uploadParams = {
    Bucket: '你的S3存储桶名称',
    Key: fileName, // 自定义文件名，比如combined-menu.json
    Body: JSON.stringify(arrayData),
    ContentType: 'application/json'
  }
  try {
    await s3Client.send(new PutObjectCommand(uploadParams))
    console.log('数组上传到S3成功')
  } catch (err) {
    console.error('上传失败：', err)
  }
}

// 调用上传方法
uploadArrayToS3(combinedMenuList, 'combined-menu.json')

• 第三步：从S3读取存储的数组

import { GetObjectCommand } from "@aws-sdk/client-s3"

const getArrayFromS3 = async (fileName) => {
  const getParams = {
    Bucket: '你的S3存储桶名称',
    Key: fileName
  }
  const response = await s3Client.send(new GetObjectCommand(getParams))
  const content = await response.Body.transformToString()
  return JSON.parse(content)
}

// 调用读取方法
getArrayFromS3('combined-menu.json').then(data => {
  console.log('获取到S3存储的组合数组：', data)
})

内容的提问来源于stack exchange，提问作者X L