amazon-web-services - 在 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 上部署 Nuxt 应用程序的文章 here .

简而言之:

转到应用程序设置 -> 重写和重定向

单击“编辑”并删除现有规则

添加以下新规则:

源地址: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
目标地址: /index.html
类型: 200 (Rewrite)