First off, sorry if this is in the wrong place. I tried StackOverflow first but got no interest. I'm trying to set up a VueJS app using Nuxt for server-side rendering. However, after deployment to my server the index.vue is returning a 404 Page not found error.
This doesn't happen when running on my development machine, and still happens even if run in Development mode on my server.
All other routes work, and getting to the index route from within the app itself works fine. It just doesn't load when refreshed. Eg:
http://myapp.com/
Doesn't work
http://myapp.com/login
Works fine
My pages folder currently looks like this:
- pages
-- index.vue
-- login.vue
I have nothing fancy set up within my nuxt.config file and have pretty much the same setup as is described in the Auth0 example
On my server I'm running nuxt with the command pm2 start npm --name "my-app" -- start
Which runs fine without any errors, and I have the following .htaccess config:
RewriteCond %{HTTP_HOST} ^my-app\.com$ [OR]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$1" [P,L]
This is the error screen I get:
The page itself is very basic at the moment, it did have far more on it, however, I've cut it down to the following trying to debug this issue:
<template>
<v-container grid-list-md>
<v-layout row wrap>
<h1>Test index, trying to fix the 404</h1>
<h2>Hello, {{ loggedUser ? loggedUser : 'friend' }}!</h2>
</v-layout>
</v-container>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: mapGetters([
'isAuthenticated',
'loggedUser'
])
}
</script>
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2284">#c2284</a>)</em></sub></div>