如何在 AWS S3 上托管的 dist 中制作 Nuxt 生成的 static spa 文件

Question

How to host Nuxt Static web app in AWS S3?

Firstly, I have tried and known how to generate static static SPA files in./dist by calling nuxt generate .

Secondly, AWS S3 supports static web hosting, but it seems that the site have to be accessed by visiting the 'index.html' in that bucket.

So, I came to this problem, for example, I got a bucket 'demo2020', and I upload Nuxt/Vue files in the./dist into that. I have also set the bucket and files in in public. After these, I can visit images in the demo2020 bucket, but the index.html, ie, http://demo2020.s3-us-west-1.amazonaws.com/index.html could not be visited.

An error page, 200.html was returned, saying:

This page could not be found

Back to the home page

This normally works on standard web server, for example, nginx or http-server/express etc. But no luck on AWS S3 yet.

---

UPDATE：May 6 2020

This is not problem of aws s3, on the localhost, if index.html from nuxt, same error page. So it seems some configuration incorrect for nuxt.

Answer 1

I get the same issue when using version 2.12.2. Downgrading to 2.11.0 solved the issue for me.

Answer 2

The url for AWS S3 as static hosting need specific index file appended, ie index.html.

Router need to be adjusted, Nuxt provides config for settings directly to vue-router, by using 'router: {}'.

The following config works for this scenario.

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