jagadish blog

How to Deploy a Vue.js Project on an IIS Server

Thati Jagadish's photo
Thati Jagadish
·

2 min read

Deploying a Vue.js application on an IIS (Internet Information Services) server involves a few essential steps: building the project, configuring the IIS server, and ensuring the application routes work correctly. This guide will take you through the process step-by-step.

Step 1: Build Your Vue.js Project

  1. Open your Vue.js project in a terminal.

  2. Run the following command to build your application:

     npm run build

    This will create a production-ready version of your project in the /dist folder.

  3. Verify the /dist folder contains files like:

    • index.html

Step 2: Copy the Built Files to the IIS Server

  1. On your IIS server, create a directory to host your Vue.js application (e.g., C:\inetpub\wwwroot\VueApp).

  2. Copy all the files from the /dist folder into the newly created directory (C:\inetpub\wwwroot\VueApp).

Step 3: Configure IIS to Serve the Vue Application

  1. Open IIS Manager

    • Press Win + R, type inetmgr, and hit Enter.

  2. Add a New Website

    • Right-click on the Sites node in the left panel and choose Add Website.

    • Fill in the following details:

      • Site Name: A name for your site (e.g., VueApp).

      • Physical Path: Browse to the directory where you copied the Vue.js files (C:\inetpub\wwwroot\VueApp).

      • Binding: Choose HTTP and specify a port (e.g., 80) or a custom domain.

    • Click OK to create the site.

Step 4: Enable URL Rewriting for Vue.js Routes

Vue.js applications with Vue Router (in history mode) require URL rewriting for navigation to work correctly. Here’s how to enable it:

  1. Install the URL Rewrite Module (if not already installed):

    • Download and install the IIS URL Rewrite Module from the Microsoft site.

  2. Create a web.config File in the /dist folder:
    Add the following content to handle routing for Vue.js:

     <configuration>
   <system.webServer>
     <rewrite>
       <rules>
         <rule name="Rewrite to index.html" 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>
   </system.webServer>
 </configuration>

  3. Copy this web.config file into your deployment directory (C:\inetpub\wwwroot\VueApp).

Step 5: Test the Deployment

  1. Open a browser and navigate to your site using the configured domain or IP address (e.g., http://localhost or http://your-domain).

  2. Verify that your Vue.js application loads correctly and that navigation works seamlessly.

Conclusion

Deploying a Vue.js project on IIS is straightforward when you follow the steps outlined above. Building the project, configuring IIS correctly, and enabling URL rewriting for routes ensure a smooth deployment.

If you encounter issues or have tips to enhance the process, feel free to share them in the comments!

IISdeploymentVue.js