How to run vuejs files on IIS - vue.js

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.

Answer 1

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.