如何在 AWS S3 上托管的 dist 中制作 Nuxt 生成的静态 spa 文件答案

【问题标题】：How to make Nuxt generated static spa files in dist hosted on AWS S3如何在 AWS S3 上托管的 dist 中制作 Nuxt 生成的静态 spa 文件
【发布时间】：2020-08-15 00:30:24
【问题描述】：

如何在 AWS S3 中托管 Nuxt Static Web 应用程序？

首先，我尝试并知道如何通过调用nuxt generate 在./dist 中生成静态静态SPA 文件。

其次，AWS S3 支持静态 Web 托管，但似乎必须通过访问该存储桶中的 'index.html' 来访问该站点。

所以，我遇到了这个问题，例如，我有一个存储桶'demo2020'，然后我将 ./dist 中的 Nuxt/Vue 文件上传到其中。我还公开设置了存储桶和文件。在这些之后，我可以访问demo2020存储桶中的图像，但是无法访问index.html，即http://demo2020.s3-us-west-1.amazonaws.com/index.html。

返回一个错误页面，200.html，说：

找不到此页面

返回首页

这通常适用于标准 Web 服务器，例如 nginx 或 http-server/express 等。但在 AWS S3 上还没有运气。

更新日期：2020 年 5 月 6 日

这不是aws s3的问题，在本地主机上，如果来自nuxt的index.html，同样的错误页面。所以 nuxt 似乎有些配置不正确。

【问题讨论】：

标签： vue.js amazon-s3 routes nuxt.js

【解决方案1】：

我在使用 2.12.2 版时遇到了同样的问题。降级到 2.11.0 为我解决了这个问题。

【讨论】：

【解决方案2】：

AWS S3 作为静态托管的 url 需要附加特定的索引文件，即 index.html。

Router需要调整，Nuxt直接给vue-router提供config进行设置，使用'router:{}'。

以下配置适用于这种情况。

// in nuxt.config.js
mode: 'spa',
router: {
  mode: 'hash',
},

【讨论】：