Problem with configuring virtual host for single page vuejs app - vue.js

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 example#email.com
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 example#email.com
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>