Vue history mode - tomcat - 404


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'

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="" xmlns:xsi="" xsi:schemaLocation="" version="3.0" metadata-complete="true">
  <display-name>my app</display-name>

Everything seems to work just fine when visiting a direct link, such as
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?