Nuxt 2.13 全静态 AWS S3 问题

Question

Nuxt 2.13 现在让您可以选择将您的

universal

应用程序转变为 完全静态站点。

我将nuxt升级到

2.13.3

，在

static

中设置目标：

nuxt.config.js

，然后运行

nuxt build && nuxt export

现在我在 /dist 文件夹中有静态文件。当我使用

MAMP

查看 /dist 文件夹时，一切正常，我可以导航到子页面并刷新页面。

问题是当我上传到S3 + Cloudfront时

S3 存储桶设置为静态 Web 托管。

Index document

和

Error document

设置为

index.html

- 当我导航到存储桶内容时，我能够加载页面并导航到子页面。但是，当我刷新子页面时，用户会看到

index

页面。

在 s3 存储桶上，我尝试启用所有公共访问 - 但这不起作用。

这是我的存储桶政策

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn-frontend/*"
        }
    ]
}

在

cloudfront

上，

Default Root Object

设置为

index.html

Answer 1

您的后备页面或错误页面的文件名是什么？在 nuxt 配置中，您可以提供以下选项来生成名称与 index.html 不同的文件，

  generate: {

    fallback: '404.html',
}

这在生成操作期间将创建一个 404.html 文件，您可以在静态网站托管中使用相同的文件作为错误页面。