Vue Router hosting issue apache2-CodePudding

Im using history mode in my vue app and when I build the project and try to run it off the server, only about half of my routes are working properly. The other half return a 404.

I went through the documentation as well as check all of the other answers on similar questions on SO and none of the solutions are working for me.

Ive tried adding a .htaccess file inside the root dist folder, ive tried adding inside the default .conf and the site specific .conf and nothing is working.

.htaccess file inside the dist folder

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

Here is the apache config that is pointing to my dist folder, i've tried adding the above code at the bottom of this file as well and it didnt work.

<VirtualHost *:80>
        ServerName Sitename
        ServerAlias Sitename
        Redirect permanent / Sitename
</VirtualHost>
<VirtualHost *:443>
        ServerName Sitename
        ServerAlias Sitename
        DocumentRoot "/var/www/Sitename/dist"
        ProxyPreserveHost On
        ProxyPass /api http://127.0.0.1:5010/api
        ProxyPassReverse /api http://127.0.0.1:5010/api
        SSLEngine On
        SSLCertificateFile /etc/letsencrypt/live/Sitename/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/Sitename/privkey.pem
</VirtualHost>

Vue router code

const router = new VueRouter({
  routes,
  mode: 'history',
  base: "/",
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
        return {selector: to.hash}
    } else {
        return { x: 0, y: 0 }
    }
  }
})

So If the dist folder is the root folder, why is the .htaccess code not fixing the router history issue on deployment? It seems from everyones answers on this site that is the solution, but it is not working. Am i missing something?

CodePudding user response：

I solved the issue by adding this line to the bottom of my sites-enabled .conf file

FallbackResource /index.html