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

do you have the .htaccess file placed in your subdir folder? — Daniel
– Daniel, Commented Aug 31, 2018 at 16:18

mtonc · Accepted Answer · 2018-08-31 16:27:34Z

37

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

answered Aug 31, 2018 at 16:27

mtonc

5741 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Daniel Over a year ago

oh yes, the example in vue docs doesn't show use within subdirectories

Cliff Helsel Over a year ago

I recently had the same problem and came across a great tool to help debug htaccess issues: htaccess.madewithlove.be

evendiagram Over a year ago

My project was deployed in a subdirectory on an existing server with 404 handling that had to be maintained. To make the above solution work in this case add one additional RewriteCond to the existing two.RewriteCond %{REQUEST_URI} ^/subdirectoryName/. [NC]

Dieter Gribnitz Over a year ago

Thanks for the link Cliff. This tool finally demystified what is going on in my htaccess file.

ATG Over a year ago

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /jcafe/dist RewriteRule ^jcafe/dist/index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /jcafe/dist/index.html [L] </IfModule> I got 403 please help.

Renan Bronchart · Accepted Answer · 2020-01-14 14:25:57Z

8

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>

answered Jan 14, 2020 at 14:25

Renan Bronchart

1,00218 silver badges27 bronze badges

Comments

EDMOND GIHOZO · Accepted Answer · 2020-06-24 21:56:26Z

4

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>

answered Jun 24, 2020 at 21:56

EDMOND GIHOZO

3555 silver badges13 bronze badges

Comments

4levels · Accepted Answer · 2025-03-10 14:23:27Z

0

I didn't think of this one: if your URL's contain encoded forward slashes like %2F, Apache will always return 404 in rewrites. This can be controlled via the AllowEncodedSlashes directive, like so:

AllowEncodedSlashes NoDecode

This will make the Vue router work as intended.
https://httpd.apache.org/docs/2.4/mod/core.html#allowencodedslashes

answered Mar 10 at 14:23

4levels

3,2742 gold badges25 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related