如何在AWS S3上托管的dist中使Nuxt生成的静态spa文件 [英] How to make Nuxt generated static spa files in dist hosted on AWS S3

问题描述

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

How to host Nuxt Static web app in AWS S3?

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

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

第二，AWS S3支持静态Web托管，但是似乎必须通过访问该存储桶中的'index.html'来访问该网站.

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.

因此，我遇到了这个问题，例如，我有一个存储桶"demo2020"，然后将./dist中的Nuxt/Vue文件上载到该文件中.我还将存储桶和文件设置为公开.之后，我可以访问demo2020存储桶中的图像，但是可以访问index.html，即

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, i.e, http://demo2020.s3-us-west-1.amazonaws.com/index.html could not be visited.

返回一个错误页面200.html，内容为:

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

找不到此页面

This page could not be found

返回首页

这通常可以在标准Web服务器上使用，例如nginx或http-server/express等.但是在AWS S3上还没有运气.

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

如果来自nuxt的index.html，则在同一错误页面上，这不是aws s3在本地主机上的问题.因此，看来nuxt的某些配置不正确.

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.

推荐答案

作为静态主机的AWS S3的URL需要附加特定的索引文件，即index.html.

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

路由器需要调整，Nuxt通过使用'router:{}'为vue-router提供直接设置的配置.

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',
},

这篇关于如何在AWS S3上托管的dist中使Nuxt生成的静态spa文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！