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

Posted 2023-03-08

技术标签:

【中文标题】在 AWS Amplify 控制台上部署为 SPA 后，Nuxtjs 动态路由在页面重新加载时不起作用【英文标题】：Nuxtjs dynamic routes doesn't work on page reload after deploying as a SPA on AWS Amplify console 【发布时间】：2020-06-17 13:50:38 【问题描述】：

我已使用 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:

【问题讨论】：

【参考方案1】：

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

简而言之：

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

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

目标地址：/index.html

输入：200 (Rewrite)

【讨论】：

【参考方案2】：

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

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