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
.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]