Vue 2 router issue when deployed with IIS server

I’m trying to deploy a vuejs application integrated with vue router(history mode on) on a IIS server. I’m having an issue with router i.e when I refresh the page anywhere else other than the main page (/), it will return with 404 NOT FOUND. I followed several resources found online but can’t seem to fix the issue.

I followed the steps mentioned in the vue router documentation by installing IIS Url Rewrite then adding this configuration in web.config in the root directory.

<?xml version="1.0" encoding="UTF-8"?>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <action type="Rewrite" url="/" />

But it still does not work.

In my IIS server, I created a folder called ${appName} and pasted the content of the dist folder inside it after npm run build on the vue app

This is a sample of my router file

const router = new Router({
    mode: 'history',
    routes: [
            path: '/',
            name: 'Home',
            component: () => import('@/views/pages/Home.vue'),
            meta: {
                auth: false,
                layout: layouts.navLeft,
                searchable: false,
                nav: false,
                icon: 'icon-home',
                roles: [ ROLES.SUPERADMIN, ROLES.ADMIN ]

This is the server.js file on the vue app.

const express = require('express');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/dist/'));
app.get(/.*/, function(req, res) {
    res.sendfile(__dirname + 'dist/index.html');


console.log('server started');