IIS web.config issues and .vue [Answered]RSS

3 replies

Last post Jun 26, 2020 03:23 AM by Jalpa Panchal

  • IIS web.config issues and .vue

    Jun 25, 2020 03:15 AM|Joseplh|LINK

    Currently I am doing a project for my college class and I am stuck.  I am in a small team that is implementing a simple webserver that will host a public database.  My team member was familiar with .vue and I was familiar with hosting an IIS server.  During implementation, I am having difficulty getting the .vue .html pages to work properly.  From what I have read, I need to modify the web.config file to allow for .vue to work.  However, whenever I modify the web.config file with sample code provided online it fails to work and I get a 500 Internal Error.  With the current web.config file I was able to get the vue page to work once, however it soon stopped working and I do not know where else to look.  Does anyone have any pointers I can look at?

    Website: Joseplh.com

    The server is running Windows 7 and I consider the server disposable...

    Tools: IIS

            Microsoft SQL

            SQL Server Management System (Trial Enterprise edition 180days)

            Node.js

    -----Current web.config-----

    <?xml version="1.0" encoding="UTF-8"?>

        <configuration>

            <system.webServer>

                <directoryBrowse enabled="true" />

        </system.webServer>

    </configuration>

    -----Online Sample-----

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

  • Re: IIS web.config issues and .vue

    Jun 26, 2020 12:21 AM|lextm|LINK

    Joseplh

    I get a 500 Internal Error.

    Unless you described clearly what kind of error page you saw (like a screen shot), there isn't much to discuss.

    Most common cause is that you didn't install URL Rewrite module, which is a separate MSI package to download.

    Lex Li
    Affordable IIS Consulting Services at https://support.lextudio.com/services/consulting.html
    ---------------------------
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: IIS web.config issues and .vue

    Jun 26, 2020 02:58 AM|Joseplh|LINK

    Sorry that the information was not as detailed as it should, the 500 error page did not provide any information as to exactly what happened, only that it was a 500 error.  I did know that the only change between working and not was that I had modified the web.config file.  The suggestion that lextm provided with the URL rewrite module turned out to be exactly the solution I needed.  I have tested the new code in the web.config file and it did not cause a 500 error.  I was under the assumption that all the tools I would need were already built into IIS and was unaware that additional modules were out there.  Thank you very much.

  • Re: IIS web.config issues and .vue

    Jun 26, 2020 03:23 AM|Jalpa Panchal|LINK

    Hi,

    to host the Vue js site in iis you could follow the below steps:

    1)build the app by running below command:

    npm run build

    2)this command creates its folder under your site folder. use this diet folder as a site path in iis.

    3) In IIS, go to Application Pools > select your vue site application pool > Advanced Settings > .NET CLR Version, choose 'No Managed Code'

    4)install the URL rewrite module from the below link:

    https://www.iis.net/downloads/microsoft/url-rewrite

    restart iis after installing this extension.

    5)Create a new Web.config file on the root folder with the following lines of codes:

    <?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>
    
          <modules runAllManagedModulesForAllRequests="true"/>
      </system.webServer>
    </configuration>

    restart the site and browse it.

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue.
    If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.