Getting 404 Not found when refresh page in Vue JS - vue.js

Question

I'am getting error "404 Not found" when i refresh any page in my Vue JS application hosted in Azure Web APP (IIS Server) except the default web page index.html
I'am already adding this rewrite configuration in my web.config according to VueJs offical docs :
<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" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
This is my web.conf file:
<configuration>
<system.webServer>
<rewrite>
<rules>
<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" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{​​​​​​​REQUEST_FILENAME}​​​​​​​" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
the `router.js` file have this conf :
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Any idea to resolve that ?
Regards
EDIT :
Just ADD pm2 serve /home/site/wwwroot --no-daemon --spa , in
Azure Portal > App Service > Configuration > Application Setting
Azure APP Service based on Linux , don't need to use web.config
BR.

Answer 1

Since I came here from top google results, and kind of kicked of my journey to get results I want to post this here in hopes it will help someone in future.
I was trying to host my Vue#3 app on local IIS to test if things work before I exchange it in production.
I am actually rewriting Vue#2 app in Vue#3, and for Vue#2 following any of these 3 links would yield success:
https://gist.github.com/AngeloAnolin/6b19d22220b27a545e10f5fa672072fa
https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain
https://dnilvincent.com/blog/posts/host-vuejs-app-on-iis
However, in Vue#3 this is a bit of overkill and will throw http error 500.19 - internal server error. Changing content of web.config with following content would yield success:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<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" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
That's it basically. Good luck with everything :D