无法直接在 Nuxt SPA 中访问页面答案

【问题标题】：Cannot visit page directly in Nuxt SPA无法直接在 Nuxt SPA 中访问页面
【发布时间】：2019-07-24 17:39:58
【问题描述】：

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

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

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

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

下面的 sn-p 是我的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>

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

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

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

【讨论】：