How to configure Vue router history mode in 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)

Dan Dan · Accepted Answer · 2021-03-05T13:19:10

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.

How to configure Vue router history mode in Apache

1 Answers