Vue-router on apache, SPA in sub-directory, can only access pages by redirect

Question

So I have a Vue app for a client set up on an apache dev server. I am doing this to match the production environment. The app is in a subdirectory and I set the \'base\' option

Answer 1

i fixed this by adding FallbackResource /index.html in my site configuration...

the directory in /etc/apache2/sites-enabled/{your domain}.conf

DocumentRoot /var/www/yourApp/dist
<Directory "/var/www/yourApp/dist">
    FallbackResource /index.html
</Directory>

Answer 2

Jeez, was looking for a solution to this for a good chunk of time yesterday and today and just found the answer: Vue help forum: Vue webpack project path change

Relevant code for anyone else that my find this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectoryName
RewriteRule ^subdirectoryName/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subdirectoryName/index.html [L]
</IfModule>

I honestly tried something similar yesterday. I changed the RewriteBase to the subdir but not the rewrite rules! I'm bad at .htaccesss stuff :(

Answer 3

It can be a bug with your apache version.

RewriteRule of "^$" broke between 2.2.21 and 2.4.2 https://bz.apache.org/bugzilla/show_bug.cgi?id=53929

You can use Fallback ressource instead of mod_rewrite in your apache config. It works for me.

In /etc/apache2/apache2.conf

<VirtualHost *:80>
    ServerName YourServerName
    DocumentRoot /var/www/yourApp/dist
    <Directory "/var/www/yourApp/dist">
        FallbackResource /index.html
    </Directory>
</VirtualHost>