在AWS Amplify控制台上部署为SPA后，Nuxtjs动态路由在页面重新加载时不起作用 [英] Nuxtjs dynamic routes doesn't work on page reload after deploying as a SPA on AWS Amplify console

问题描述

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

这篇关于在AWS Amplify控制台上部署为SPA后，Nuxtjs动态路由在页面重新加载时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！