AWS Amplify 上的 Nuxt 应用程序在浏览器中刷新后出现路由问题

Question

我有一个 nuxt 网站通过 Amplify 部署到 AWS。这是我的目录结构：

|pages
|_schedule
|__ _id
|_articles
|__ _id

例如，如果我刷新 /articles 页面，Amp 会在末尾添加一个反作用 (/articles/)。刷新后，当我单击页面上的一篇文章时，没有任何反应。我在代码中使用 nuxt-link 。

我遇到的另一个问题是当我在 /articles/ 页面上点击刷新时。 Amp 再次添加了反冲，然后我被重定向到根（这是使用 Amp 的默认重写规则，通过 404 重写将您发送到根。）

这是我的构建设置：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
        - echo "API_URL=$API_URL" >> .env 
    build:
      commands:
        - npm run generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

这是我的 nuxt.config.js 文件：

export default {
  target: 'static',
  
  publicRuntimeConfig: {
    apiUrl: process.env.API_URL,
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.API_URL,
    },
  },

  head: {
    title: 'My title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@400;700;900&display=swap',
      },
    ],
  },

  components: true,
  buildModules: ['@nuxtjs/tailwindcss'],
  modules: ['@nuxtjs/axios'],

  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    config: {},
  },
}

更新

我实际上解决了第一个问题。以前我错过了我的 nuxt.config.js 文件中有以下属性：

router: {
  trailingSlash: false
},

删除此内容后，我的第一个问题就得到了解决。我可以刷新 /articles 并单击链接。

我在本地注意到的一件事是，当我运行 nuxt generated 然后 nuxt start 时，当我在 /article/ 这样的页面上点击刷新时，我的网络选项卡中会发生以下情况：

这些文件位于 dist/_nuxt 文件夹中，该文件夹是在运行 nuxtgenerate 后创建的。

当我部署到 AWS Amplify 并执行相同的操作时，我在网络选项卡中看到以下内容：

如您所见，一旦部署，它就不会查找那些js文件。我认为这与重定向规则有关。目前我没有。我已经尝试了很多事情。

更新2

我将应用程序部署到 app.netlify.com/drop 进行测试：gracious-leavitt-e8523a.netlify.app

以下是名单页面和球员页面的详细信息：

花名册 目录结构

|pages
|_roster
|__index.vue

index.vue

<template>
    <Roster></Roster>
</template>

<script>
import Roster from "~/components/Roster.vue";

export default {
    components: {
        Roster
    },
}
</script>

Roster.vue 中的数据属性

data() {
  return {
    loading: false,
    // vars in data instead of computed because the watcher needs to change the value
    rosterData: this.$store.getters.getRosterData,
    selectedSeason: this.$store.getters.getSiteOptions.activeSeason
  }
},

所以我正在从我的商店获取数据。刷新 /roster 页面时我没有看到问题

玩家// 目录结构

|pages
|_player
|__ _id
|__ _name
|___index.vue

index.vue

<template>
  <Player :data="data" :photos="photos"></Player>
</template>

<script>
import Player from '~/components/Player.vue'
import { refreshStore } from '~/utility/refreshStore.js'

export default {
  components: {
    Player,
  },

  async asyncData({ params, $axios, $config, store }) {
    try {
      const id = params.id

      // If the page is refreshed, the store is not available. If that's the case, make an axios call to get data
      if (!store.getters.getStoreActive) {
        await refreshStore(params, $axios, $config, store)
      }

      const data = await $axios.$get($config.apiUrl + '/players?id=' + id)

      const photos = await $axios.$get(
        $config.apiUrl +
          '/photos?playerId=' +
          id +
          '&limit=' +
          store.getters.getSiteOptions.limitPlayerPagePhotos +
          '&season=' +
          store.getters.getSiteOptions.activeSeason,
      )

      return { data, photos }
    } catch (error) {
      console.log('in error of async')
      console.log(error)
    }
  },
}
</script>

我有一个功能

refreshStore

，当您直接进入播放器//页面或刷新该页面时，它将重新填充商店。当我运行 nuxt generated 然后 nuxt start 时，这适用于我的本地，但是一旦部署，我就会得到 404

完整目录

Answer 1

在AWS amplify中添加重定向规则。

Answer 2

刚刚找到了这个很有希望的答案

https://www.appsloveworld.com/vuejs/100/17/nuxtjs-dynamic-routes-doesnt-work-on-page-reload-after-deploying-as-a-spa-on-aws

基本上，它说：

转到“重写和重定向”-> 编辑 源码地址： 目标地址：/index.html 类型：200（重写）

但这让我遇到了更多问题...... 我在这里找到了很好的答案：https://github.com/aws-amplify/amplify-hosting/issues/3829

我删除了所有规则，现在它正在工作......