Deploy VUE application on IIS-CodePudding

I'm trying to deploy a VUE frontend application on IIS.
The routing is working fine in dev mode, however, something seems to break in the routing when I host my VUE app on IIS. Can someone advise how to configure IIS to handle the routing of a VUE frontend app (I'm using vue-router)?

CodePudding user response：

Below are the steps for deploying vue application on iis server with the proper routing configuration :

Setup IIS

Download & Install:
.NET Core Hosting Bundle
Microsoft URL Rewrite
Restart the IIS service.
Right click the Sites folder and select "Add website"
→ enter site name (e.g. myWebsite)
→ create a folder (where your website files will be) and enter the folder's path as the website physical path.

Generate the VUE app files

Go to project folder & run command: npm run build
Take the files in the generated 'dist' folder and paste them into your website's physical path.
Add the "web.config" file (below) into the website physical path.

web.config

<?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>