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

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!