Question posted in
Some documentation to get you started can be found here.

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

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 on vue-router to match. If I navigate to my virtual host root it redirects properly, however navigating to the same address by typing the address in gives a 404.

Here is my router code: 

const routes = [
  {path: '/', redirect: '/london' },
  {path: '/:city', component: homeView}
]

const router = new VueRouter ({
  mode: 'history',
  routes,
  base: '/subdir/'
})

I also have the relevant Apaache .htaccess in the ‘subdir’:

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

So if I navigate to “cityapp.local/subdir” it redirects to “cityapp.local/subdir/london”, but if I type “cityapp.local/subdir/london” I got the apache 404 page.

Any thoughts or help would be appreciated!

EDIT: If I set my virtual host to include the subdir and removed the base option from the router, everything works fine. However, I cannot do this on production so I hope this info helps a little.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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 :(


  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search