3

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

2 回答 2

5

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

简而言之：

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

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

目标地址：
/index.html

类型：
200 (Rewrite)

于 2020-06-11T11:58:07.933 回答
1

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

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

于 2020-03-05T01:06:22.473 回答