If you are using Windows Server, make sure to check you include the “IIS” in the Server Roles. Let’s get started.
1.1 Open the terminal and execute the command
npm run build
If building is successfully, you can find the folder with a name “dist”.
1.2 Copy the dist folder content and move it in a folder in Drive C:
In my example, I created a folder with a name “myvueapp” in the path of C:\inetpub\wwwroot and copy and paste all of the files and folders from the dist folder.
2.1 Create a web.config file inside the “myvueapp” and paste these 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="/" />
</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>
2.2 Save the file.
3.1 Open the IIS app and create a new website under the “Sites” option and name it whatever you prefer. In my example, I name it as “myvuewebsite”. Locate the path of “myvueapp” and specify the specific port that you want.
3.2 Click “Ok” when you are done.
4.1 On the right option, you will find the “Browse …” with a port number. Click and it will open the default browser.
Cool! Now you have Vue.JS app running on IIS.
If you have some questions or comments, please drop it below 👇 :)
