How to config Vue 2 application on IIS server?

Question

I need help with config IIS server and Vue 2 application, I just installed vue 2 application with production build on Windows IIS 7 server, and all work fine, only one thing is not working: When I try to open any page with link "example mysite.com/somepage" which written in vue-router i see 404 error, but if I click on menu link work fine, if you type just main url mysite.com it will open, but any another routes not working!

I think I need to setting my httpRedirect or something like this!

Answer 1

From your information I'm assuming you're using the history mode, here's the one I've been using, and you can reference on here:

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

Answer 2

As noted in the vue-router documentation, in order to use history mode, you need to do the following:

1. Install IIS UrlRewrite.
2. Drop a web.config file into the root of the project. See the vue-router documentation for an example web.config file.