如何将VueJS转换为静态HTML文件并部署至S3存储桶？

云原生阿岚

2026-8-6

将VueJS转换为静态HTML并托管到S3的步骤

一、把VueJS代码打包为静态HTML资源

场景1：基于Vue CLI/Vite的项目

如果你的Vue代码是通过Vue CLI或Vite创建的完整项目：

确保本地已安装依赖（未安装的话执行npm install）
在项目根目录运行打包命令：
- Vue CLI项目：npm run build
- Vite项目：npm run build
  执行完成后，项目根目录会生成dist文件夹，里面包含所有静态资源（HTML、编译后的JS/CSS、静态文件等），这就是我们需要上传到S3的内容。

场景2：单个Vue文件/轻量Vue代码

如果只是单个.vue文件或简单的Vue脚本，可以直接生成静态HTML：

下载对应版本的Vue库文件（Vue 2或Vue 3）到本地目录

编写静态HTML文件，引入本地Vue库并编写Vue逻辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简单Vue应用</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    // Vue 2 写法
    new Vue({
      el: '#app',
      data: {
        message: '你好，Vue！'
      }
    })
  </script>
</body>
</html>

若使用Vue 3，调整脚本部分：

<script>
  const { createApp } = Vue
  createApp({
    data() {
      return {
        message: '你好，Vue 3！'
      }
    }
  }).mount('#app')
</script>

确保Vue库文件和HTML文件在同一目录，就得到了完整的静态资源包。

二、将静态资源托管到S3存储桶

创建S3存储桶
- 登录AWS控制台进入S3服务，点击「创建存储桶」
- 填写全球唯一的存储桶名称，选择目标区域，保留其余默认配置完成创建
配置静态网站托管
- 进入存储桶的「属性」标签，下拉到「静态网站托管」模块，点击「编辑」
- 选择「启用」，设置索引文档为index.html（若需要自定义404页面，可同时设置错误文档为404.html），保存更改
设置存储桶权限
- 切换到「权限」标签，找到「存储桶策略」并点击「编辑」
- 添加以下策略（替换your-bucket-name为你的存储桶名称）：
```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}
```
- 保存策略后，进入「阻止公共访问」设置，取消勾选「阻止所有公共访问」（确认风险后保存）
上传静态资源
- 切换到「对象」标签，点击「上传」，将dist文件夹内的所有文件（或单个HTML及Vue库文件）上传到存储桶根目录
访问网站
- 回到「属性」标签的「静态网站托管」模块，复制提供的端点URL，在浏览器中打开即可访问你的静态Vue网站

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

如何将VueJS转换为静态HTML文件并部署至S3存储桶？

一、把VueJS代码打包为静态HTML资源 #

场景1：基于Vue CLI/Vite的项目 #

场景2：单个Vue文件/轻量Vue代码 #

二、将静态资源托管到S3存储桶 #

一、把VueJS代码打包为静态HTML资源

场景1：基于Vue CLI/Vite的项目

场景2：单个Vue文件/轻量Vue代码

二、将静态资源托管到S3存储桶