Nuxt 2.13 全静态 AWS S3 问题答案

【问题标题】：Nuxt 2.13 full static AWS S3 issuesNuxt 2.13 全静态 AWS S3 问题
【发布时间】：2020-11-02 10:43:31
【问题描述】：

Nuxt 2.13 现在为您提供将universal 应用程序转换为full static site 的选项。

我将nuxt升级为2.13.3，在nuxt.config.js中设置目标：static，然后我运行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

【问题讨论】：

您找到解决方案了吗？

标签： amazon-web-services amazon-s3 nuxt.js

【解决方案1】：

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

  generate: {

    fallback: '404.html',
}

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

【讨论】：