Question

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

|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 generate 然后 nuxt start 时，当我在 /article/ 之类的页面上刷新时，我的网络选项卡中会发生以下情况：

这些文件在运行 nuxt generate 后创建的 dist/_nuxt 文件夹中。

当我部署到 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 generate 然后 nuxt start 时，这适用于我的本地，但是一旦部署，我会得到一个 404

完整目录

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

更新

更新 2

0 个答案: