Блог

Главная - Вопросы по программированию - Невозможно перейти на страницу напрямую в Nuxt SPA

Невозможно перейти на страницу напрямую в Nuxt SPA

#javascript #vue.js #nuxt.js

#javascript #vue.js #nuxt.js

Вопрос:

Я использую Nuxt 2.3.4 . Я использую vue-apollo для запроса данных для pages/_.vue файла для динамической обработки содержимого. Согласно этой странице, это способ иметь динамически вложенные маршруты. Все работает локально. Однако, когда я копирую свою /dist папку после запуска yarn run build на свой хостинг-сервер, я получаю 404 ошибку при попытке посетить любые страницы, отличные от / прямого (например, https://mysite.whatever/someurl/somenestedUrl ).

На основе документов по настройке маршрутизатора nuxt я настроил свой nuxt.config.js на следующие настройки:

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

Возможно, мне нужно настроить мой серверный nginx .conf файл для обработки этих URL-адресов?

Приведенный ниже фрагмент является моим pages/_.vue файлом.

 <template>
  <v-container v-if="!$apollo.loading amp;amp; 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>

Ответ №1:

Если вы используете режим ssr, то вам необходимо запустить nuxt server на сервере, например, nuxt start и далее по потоку от nginx к nuxt server. Пример конфигурации можно найти в документах

Если вы используете режим SPA, то вам необходимо перенаправлять все запросы на index.html через nginx, как в этом примере https://github.com/steebchen/nginx-spa/blob/master/nginx.conf