Question

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

基于this page，我已将nuxt.config.js配置为具有以下设置：

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

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

下面的代码段是我的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

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

1 个答案: