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

hm2xizp9  于 2023-11-21  发布在  Vue.js
关注(0)|答案(3)|浏览(182)

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

字符串

vaqhlq81

vaqhlq811#

我写了一篇关于如何在Amplify here上部署Nuxt应用程序的文章。
简单地说:
1.前往应用程序设置->重写和重定向
1.点击编辑并删除现有规则
1.增加以下新规则:

来源地址:

第一个月

目标地址:

/index.html

类型:

200 (Rewrite)

5m1hhzi4

5m1hhzi42#

@lupas帮了我一个大忙,你只需要设置如下
1)在Amplify控制台上转到:重写和重定向2)删除现有条目3)添加以下内容:源地址:目标地址:/index. html类型:200(重写)

k0pti3hp

k0pti3hp3#

我尝试了一切,唯一真正有效的是设置

ssr: false

字符串
在nuxt.confi.js中,希望它适用于任何其他人

相关问题