VueRouter pages not found after reloading on apache-CodePudding

I'm having this issue: when I reload the vue app on the homepage everything works quite well. When I reload the page on another sub-site, the page shows a 404.

I'm using the router module within my project. I tried adapting the vue.config.js and setting the publicPath to '/' and to ''. When setting it to '/' i cannot replicate the issue locally. when the Path is set to '' I get the same error locally and on apache.

I tried applying some redirect rules and conditions but those which I found online which solved the same issue don't work.

I tried to use a catchall route in my router without success.

Anyone having simular issues? thank you!

Router

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/contact-imprint',
    name: 'contact',
    component: () => import('../views/Contact.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/',
  transpileDependencies: true
})

apache config

<VirtualHost *:80>
    ServerName domain.io
    ServerAlias www.domain.io
    ServerAdmin [email protected]
    DocumentRoot /var/www/domains/domain/

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

    <Directory /var/www/domains/domain/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    # my default rewrite cond/rule
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =domain.io [OR]
    RewriteCond %{SERVER_NAME} =www.domain.io
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

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

</VirtualHost>

CodePudding user response：

In case it's not enabled

sudo a2enmod rewrite

add rewrite

<Directory /var/www/domain/>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
</Directory>

and restarting services apache2 restart helped me to solve the issue.