How to configure Vue router history mode in Apache - apache

Question

I'm getting this error when I try to add the line below on my /etc/httpd/conf/httpd.conf:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Syntax error on line 228 of /etc/httpd/conf/httpd.conf:
RewriteBase: only valid in per-directory config files
I'm using Apache/2.4.6 (CentOS 8)
The only thing I changed in my httpd folder are:
/etc/httpd/conf/httpd.conf:
<VirtualHost *:80>
ServerName masterseller.ph
Redirect permanent / https://masterseller.ph
</VirtualHost>
and
/etc/httpd/conf.d/ssl.conf:
<VirtualHost *:443>
DocumentRoot "/var/www/html/masterseller/dist/"
... (+ SSL configs)
</VirtualHost>
Oh btw I'm trying to deploy my vue dist folder (which is also my DocumentRoot).
My Vue-Rounter:
const router = new VueRouter({
mode: "history",
base: "/",
routes
});
I'm trying to follow and understand this instruction:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I tried to add 'FallbackResource /index.html' at the end of my httpd.conf file, It worked, but I wouldn't be able to access my phpmyadmin page.
What am I mising? I'm new to all this.
Thank you in advance for your answers (also my boss doesn't want the hash mode for the vue router)

Answer 1

The error means the config won't work in the base config file. In Apache you can also place a "per-directory" configuration in each directory.
Create a new .htaccess file in the dist root and place the configuration in it.
The .htaccess Apache docs say:
.htaccess files (or "distributed configuration files") provide a way to make configuration changes on a per-directory basis. A file, containing one or more configuration directives, is placed in a particular document directory, and the directives apply to that directory, and all subdirectories thereof.