Problem with configuring virtual host for single page vuejs app

Question

I want to host a single page Vuejs application that has vue router. I am using apache2 virtual host and I have written the code below for the site.

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName example.com
    ServerAlias www.example.com
    DocumentRoot /var/www/example.com/dist

    <Directory /var/www/example.com/dist/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <IfModule mod_dir.c>
        DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
    </IfModule>

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

</VirtualHost>

The root directory of my project is /var/www/mydomain.com. Now, when I try to install let's encrypt ssl certificate using this command: certbot --apache -d example.com -d www.example.com it gives me an error saying:

Error while running apache2ctl configtest.
Action 'configtest' failed.
The Apache error log may have more information.

AH00526: Syntax error on line 22 of /etc/apache2/sites-enabled/example.com.conf:
RewriteBase: only valid in per-directory config files.

I don't know what to do. Can anyone help me?

Answer 1

I changed my code like below and it worked!

<VirtualHost *:80>
ServerAdmin [email protected]
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/example.com/dist

<Directory /var/www/example.com/dist/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted

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

</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

<IfModule mod_dir.c>
    DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
</IfModule>

I put the following code inside the <Directory /var/www/example.com/dist/> </Directory> part and it is working fine.

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