在 AWS Amplify 控制台上部署为 SPA 后，Nuxtjs 动态路由在页面重新加载时不起作用

Question

我已使用 AWS Amplify 控制台将我的 Nuxtjs 应用程序部署为 AWS 上的 SPA。现在我的网站有一些动态路由，当重新加载或在新选项卡中打开时重定向到 404 页面。我知道当我们使用nuxt generate 生成静态站点时，路由应该在 nuxt.config.js 中使用 routes()。但在 SPA 模式下，它应该正在处理页面刷新或重新加载。即使在 Angular 中以 SPA 模式运行时，动态路由也可以正常工作。奇怪的是，当网站作为单页应用程序运行时，动态路由不起作用。

在生产模式下本地使用时，即npm run build && npm run start，路由工作正常。但在将其部署到 AWS Amplify 后，它会重定向到 404 页面。我在这里想念什么？ 这是我使用的 Amplify.yml 配置

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
test:
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
      - '**/*.png'
      - '**/*.mp4'
  phases:

Answer 1

我写了一篇关于如何在 Amplify here 上部署 Nuxt 应用程序的文章。

简而言之：

1. 转到应用设置 -> 重写和重定向
2. 点击编辑并删除现有规则
3. 添加以下新规则：

来源地址：
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

目标地址：
/index.html

输入：
200 (Rewrite)

Answer 2

@lupas 在 nuxt discord 中帮助了我。你只需要如下设置

1) 在 Amplify 控制台上转到：重写和重定向 2）删除现有条目 3）添加以下内容： 源地址： 目标地址：/index.html 类型：200（重写）