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

我已使用AWS Amplify控制台将我的Nuxtjs应用程序部署为AWS上的SPA。现在我的网站有一些动态路线,当重新加载或在新选项卡中打开时,会重定向到404页。我知道当我们使用nuxt generate生成静态站点时,路由应该使用nuxt.config.js中的routes()。但在SPA模式下,它应该正在进行页面刷新或重新加载。即使在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:

解决方案

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

简而言之:

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

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

目标地址:
/index.html

类型:
200 (Rewrite)

相关文章