.htaccess to VueJS in non-root directory

Question

I have a problem with .htaccess for VueJS. I'm using the example available in the official documentation.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

It turns out that this example works perfectly in the root folder, but my front-end is in another folder, because on the root folder is the site's home page, which was not developed with VueJs. So I'm creating inside the /admin folder. The directory hierarchy looks something like this:

   /
    |_ /index.php
    |_ /.htaccess (to full site)
    |_ /admin
       |_ /.htaccess (to vue)
       |_ /index.html (vue page)

The problem is that if I access the browser https://example.com/admin works perfectly, but https://example.com/admin/user works only by clicking on the link contained in site body, which leads to this URI, but it does not work with direct browser access. Only the index.html page accepts direct access from the browser. Does anyone have a suggestion on how to solve this problem? Try putting the .htaccess in the root folder and not in /admin folder, but it didn't work. I also tried replacing the RewriteBase / line to RewriteBase /admin but it didn't work.

The .htaccess file in root folder:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

Basically removes the .php extension.

Answer 1

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

If this .htaccess file is located inside the /admin subdirectory and /admin is part of the URL then it should be written as follows, otherwise, it will try to rewrite the request to /index.html in the document root, which presumably does not exist.

DirectoryIndex index.html

RewriteEngine On

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

The changes made:

• Remove the RewriteBase directive entirely.
• Remove the slash prefix from the RewriteRule substitution string. ie. /index.html becomes index.html. Rewriting to a relative path. This is a file-path relative to the directory that contains the .htaccess file.
• The DirectoryIndex directive may not be required, depending on how this is configured in the server config (DirectoryIndex index.html is the default).

Note that this will completely override the .htaccess file in the parent/root directory.

---

I also tried replacing the RewriteBase / line to RewriteBase /admin but it didn't work.

That didn't work because of the slash prefix on /index.html (the RewriteRule substitution string). The RewriteBase directive only applies to relative path substitutions (ie. not root-relative or absolute).

Try putting the .htaccess in the root folder and not in /admin folder, but it didn't work.

You could do something like that, but you will need to modify the directives accordingly (it won't work as written). However, you could get conflicts with existing directives (if any). It would arguably be preferable to keep the sites/config separate.