Page not found "/" route - node.js

Question

I'm trying to setup a VueJS app using Nuxt for server side rendering. However after deployment to my server the index.vue is return a 404 Page not found error.
This doesn't happen when run 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>

Answer 1

I seem to have managed to fix this. However, I'm not completely sure on the cause the fix involved modifying my .htaccess. I started playing with the settings and ended up with the following which works well (for now at least).
RewriteCond %{HTTP_HOST} ^my-app\.com$
RewriteRule "(.*\.(jpg|gif|png|svg|js|css))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http\:\/\/127\.0\.0\.1\:3000\/$2" [P,L]
The rule for jpg|gif etc is required as they don't load when using the second rule.