Giving 404 for only '/' route (Nuxt JS) - Shared Hosting Deployment

Question

I am trying to set up a Nuxt app using @nuxt/pwa starter-template for Server Side Rendering on a Shared Hosting. However my Nuxt app is running on "http://localhost:50000". I am trying to show the running app from "http://example.com" by Rewriting Rule in .htaccess.

When trying to access "http://example.com" it's showing 404. Without the "Index (/)" route every other route is fine. Even coming to "Index (/)" route from any other route is also OK. Only showing 404 when trying to load the "/" route directly.

Eg:

http://example.com Doesn't work

http://example.com/contact Works fine

*** There is already an issue exactly like mine at Github: https://github.com/nuxt/nuxt.js/issues/2625 But I couldn't found anything helpful from there.

Here is the .htaccess file I am using. --

Options +FollowSymLinks 
<IfModule mod_rewrite.c>

RewriteEngine on

RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]

</IfModule>

Can somebody help me out with this issue??? Thanks in advance!

Answer 1

A little late to this party but if anyone is experiencing the same issue, what fixed it for me was to disable DirectoryIndex in .htaccess.

RewriteEngine on

DirectoryIndex disabled
RewriteRule ^(.*) http://127.0.0.1:50000/$1 [P,L]

Answer 2

RewriteEngine on

Forcing all incoming requests to HTTPS.

HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines

RewriteCond %{HTTP_HOST} ^my-domain.com.br$ RewriteRule "(..(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC] RewriteRule ^(.) "http://127.0.0.1:3000/$2" [P,L]

Work for me.

Answer 3

It seems to be a bit late for this answer, but I only found it in github and would like to help anyone who finds this topic with the same problem.

This htaccess is working for me, it loads the index.vue page normally when I refresh and the navigation works.

Replace my-domain with your domain.

RewriteEngine on

# Forcing all incoming requests to HTTPS. 
# HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines

RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]

Answer 4

Use my .htaccess code:

RewriteRule ^index.html.var$ http://127.0.0.1:3000/ [P]
RewriteRule ^(.*) http://127.0.0.1:3000/$1 [P]

This problem has also troubled me for a long time. I added _index.vue dynamic vue-router and,

validate ({params}) {
  console.log (params.index);
}

The terminal outputs "index.html.var". So I was thinking that when we visited the homepage, Apache sent a proxy, but the request URL received by nuxt.js was not "/" but "index.html.var".