Hosting vue app with Apache: Prevent source file access from URL - apache

Question

I want to host a vue app on an Apache server - for learning purpose.
For that I want Apache to support the Vue router and also I want that it is not possible to access source files via URL.
To support the router I added the following lines to my httpd.conf file:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Vue documentation
So that is working. But now I want to prevent the access of my source files via URL. So I tried the approach from this answer:
https://stackoverflow.com/a/10236791/9838670
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC]
RewriteRule \.(gif|jpg)$ - [F]
For testing I added CSS files to the rewrite rule
RewriteRule \.(gif|jpg|css)$ - [F]
But then my index.html could not access the files, too.
Anyone an idea how to fix this?
My settings for the directory root. Also I am loading the module for the rewrite engine.
LoadModule rewrite_module modules/mod_rewrite.so
DocumentRoot "../../dist/"
<Directory "../../dist/">
#
# Possible values for the Options directive are "None", "All",
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that "MultiViews" must be named *explicitly* --- "Options All"
# doesn't give it to you.
#
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.4/mod/core.html#options
# for more information.
#
Options Indexes FollowSymLinks
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# AllowOverride FileInfo AuthConfig Limit
#
AllowOverride None
#
# Controls who can get stuff from this server.
#
Require all granted
# THIS DOES NOT WORK
# Rewrite engine
# RewriteEngine on
# RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC]
# RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC]
# RewriteRule \.(gif|jpg|css)$ - [F]
# RedirectMatch "^/$" "/home"
<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>

Answer 1

Let's say Apache document root is set to DocumentRoot "/folder_one/folder_two"
Placing files in a folder_one will prevent people browsing your apache server and requesting the files directly.
Place index file in folder_two and include some code such as PHP to tell apache to include whatever files you want from folder_one.
In this manor Apache will still be able to serve whatever files you want from folder_one and people will not be able to request the files directly as the are located in a directory above the Apache document root.