Search code examples
vue.jshttp-redirecthttp-status-code-404refreshsubdirectory

Vue router to subfolder - 404 in production on refresh

I am serving my vue.js app in production on a subdomain using "base: '/my-app/'" in vite.config.js (no problems here)

Example of a problematic URL: my-domain/my-app/my-component

While accesing the problematic URL via a router link there are no issues but when refreshing that page I am greeted by a 404. ( following the error in the network tab I get "strict-origin-when-cross-origin")

By my understanding, I should use .htaccess to redirect all URLs to "index.html" as explained here but once I do that I get an unexpected token in my console as my doctype is replaced from <!DOCTYPE html\> to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

*I am using a .htaccess file in the subfolder in case that makes any difference

Thank you in advance

Solution

  • .htaccess code to redirect all back to index.html in case it help anyone else at some point:

    RewriteEngine On
RewriteCond %{REQUEST_URI} !^/vue-chat/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]