Deploying a Vue app to IIS under the Default web site - vue.js

Question

I was successfully able to get a Vue app working in iis at the root level with a port(8181),
but I need to get it working under the Default Web Site in iis (port 80)
To test this I started a brand new website with the Vs19 template. ( should have used vue scaffolding, will try that tomorrow, done, reproduces the same error)
Got it up and running under npm run serve.
Ran npm run build
Went to IIS, added a new app under Default Web Site" called VuejsApp2 pointing to the dist folder under the main folder.
Copied the default web.config for a vue app:
<?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>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
Went to the Dist folder and set security user "Everyone" and gave it full access to the folder (yes I know, it's a test)
Made sure sure URl re-write was installed (required to get app working at base) by looking under installed apps
Pointed the app in IIS to the same App pool that worked for the other app (integrated, no
When I navigate to the app in chrome at http://localhost/VuejsApp2
I get a 503 service is not available error
I figure it's something basic, but all the tutorials I've found to host vue in iis, this is all that's listed to do, I found a SO question on the same topic, but it had no answers...
Other SO question with no answer
I read that 503 in IIS meant that the app pool was stopped due to multiple crashes, but the app pool shows started not stopped.
UPDATE:
I added this to the web.config for my basic empty vue app and it still gets 503 error
<?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="/index.html" />
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
On my original app, I did it and I"m getting a different unrelated error. so maybe it helped?

Answer 1

I would check your rewrite rule, I think you're getting an error due to too many redirects.
You're sending anything intended to be picked up by VueRouter to the root of your site, rather than to your index.html. Change your rewrite rule to this
<action type="Rewrite" url="/index.html" />
I think that might help solve your problem