I'm currently working with Nuxt version 2.3.4. In my project, I am utilizing vue-apollo to fetch data for a file named pages/_.vue, which dynamically manages content. As indicated on this documentation page, this is the recommended approach for handling nested routes dynamically. Everything is functioning correctly on my local setup. However, whenever I transfer my /dist folder after executing yarn run build to my hosting server, I encounter a 404 error when trying to access pages other than the root URL directly (e.g.,
https://mysite.whatever/someurl/somenestedUrlIn accordance with the guidelines provided in the nuxt router configuration section, I have adjusted my nuxt.config.js settings as follows:
/*
** Router
*/
router: {
routeNameSplitter: '/'
},
Could it be necessary for me to configure my server's nginx .conf file to handle these types of URLs?
The code snippet below illustrates the contents within my pages/_.vue file.
<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>