javascript - 无法直接访问 Nuxt SPA 中的页面

Question

我正在使用 Nuxt 2.3.4。我正在使用vue-apollo查询 pages/_.vue 文件的数据以动态处理内容。根据this page ，这就是动态嵌套路由的方法。一切都在本地进行。但是，当我在运行 yarn run build 后将 /dist 文件夹复制到我的托管服务器时，我尝试时收到 404 错误直接访问 / 以外的任何页面(例如，https://mysite.whatever/someurl/somenestedUrl)。

基于the nuxt router configuration docs我已将我的 nuxt.config.js 配置为具有以下设置:

/*
** Router
*/
router: {
    routeNameSplitter: '/'
},

也许我需要配置我的服务器 nginx .conf 文件来处理这些网址？

下面的代码片段是我的 pages/_.vue 文件。

<template>
  <v-container v-if="!$apollo.loading && page">
    <v-layout>
      <v-flex
        xs12
        md9
      >
        <h2>{{ page.title }}</h2>
        <div v-html="page.content" />
      </v-flex>
      <v-flex
        id="sidebar"
        class="hidden-md-and-down"
        xs3
      >
        <h1>Sidebar</h1>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as R from 'ramda'
import gql from 'graphql-tag'

export default {
  name: 'Page',
  apollo: {
    page: {
      query: gql`
        query GetPageByUri($uri: String!) {
          pageBy(uri: $uri) {
            id
            pageId
            title
            date
            uri
            content
          }
        }
      `,
      variables() {
        return {
          uri: this.$route.params.pathMatch
        }
      },
      result({ data, loading, networkStatus }) {
        if (R.isEmpty(data)) return this.$router.replace('/404')
      },
      update(data) {
        return data.pageBy
      }
    }
  }
}
</script>

Answer 1

如果您使用 ssr 模式，那么您需要在服务器上启动 nuxt 服务器，例如nuxt 启动并从 nginx 下游到 nuxt 服务器。示例配置可以在 docs 中找到

如果您使用 SPA 模式，那么您需要通过 nginx 将所有查询重定向到 index.html，如本例 https://github.com/steebchen/nginx-spa/blob/master/nginx.conf 所示。