Nuxtjs dynamic routes doesn't work on page reload after deploying as a SPA on AWS Amplify console

Question

I have deployed my Nuxtjs app as SPA on AWS using AWS Amplify console. Now my website has some dynamic routes which redirects to 404 page when reloaded or opened in a new tab. I know that when we generate a static site using nuxt generate the routes should be using routes() in nuxt.config.js. But in SPA mode it should be working on page refresh or reload. Even in Angular when run in SPA mode dynamic routes work fine. Its so strange that the dynamic routes doesn't work when the website is run as a single page application.

When used locally in production mode i.e npm run build && npm run start the routes work fine. But after deploying it to AWS Amplify it redirects to 404 page. What am I misssing here? Here's the Amplify.yml config i used

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

I wrote an article on how to deploy a Nuxt Application on Amplify here.

In a nutshell:

1. Go to App Settings -> Rewrites and redirects
2. Click on Edit and remove the existing rule
3. Add the following new rule:

Source Address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Target Address:
/index.html

Type:
200 (Rewrite)