How to run vuejs files on IIS

Question

So am using a vueJS Example as a demo for learning purposes which uses a requirejs-vue as a component loader. when i run the server on Live-Server extension of VS-code (a simple http server), it run correctly with no problems. However, when i run this example on IIS server (version 8.5) on windows 8.1, it through 404 Error app.vue does not exist.

Failed to load resource: the server responded with a status of 404 (Not Found)

and in the Network devtool, i can see that every module is loaded correctly, except for *.vue files,

VueJS Example : https://plnkr.co/edit/Y2cEa3?preview

Web Config for IIS that am using: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

<?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>
  </system.webServer>
</configuration>

PS: i have also run an other example that uses http-vue-loader instead of requirejs-vue and IIS still throwing the same error.

Abraham Qian Abraham Qian · Accepted Answer · 2020-06-01T09:12:26

We need to set mimeType for the “.vue” extension file to use httpvueloader/requiresjs_vue.

In addition, we could manually add it to a Web.Config file, which can be recognized by IIS.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".vue" mimeType="application/javascript"/>
    </staticContent>
  </system.webServer>
</configuration>

Feel free to let me know if the problem still exists.

How to run vuejs files on IIS

1 Answers