Vue history mode - tomcat - 404

Hi,

I have a vue app that is running in tomcat.

my router looks like this:

export const router = new Router({
mode: 'history',
  base: '/',
 routes: [
{
  name: 'home',
  path: '/',
  component: Home2
},
...........
{ path: '/lost/:id',
name: 'lost-details',
meta: {authRequired: false},
component: () => import('./views/LostDetails.vue') 
 },
    {
    path: '/:catchAll(.*)',
component: ErrorLanding,
name: 'NotFound'
 },
],

my
vue.config.js looks like this:

 module.exports = {
devServer: {
  port: 80,     
  proxy: "http://localhost/*"
},
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/'
  }              

And my web.xml file in dist/ROOT/WEB-INF/ has the following code:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0" metadata-complete="true">
  <display-name>my app</display-name>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>  
  </error-page>  
</web-app>

Everything seems to work just fine when visiting a direct link, such as www.mywebapp.com/faq
and it works fine when pressing refresh also.

However i am getting an error message i my console when using google chrome.:
“Failed to load resource: the server responded with a status of 404 ()”

When looking more closely it seems to be getting 404 but then redirecting and
returning 200 ok after a split second.

Is there anything i can do to fix this?