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

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应用程序的文章。

简而言之：

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

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

目标地址：
/index.html

类型：
200 (Rewrite)

Answer 2

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

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