愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:amazon-web-services aws-amplify aws-amplify-cli error Nuxtjs dynamic routes does  热度:37.5℃

本文介绍了在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)

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

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP