How to Deploy a Vue.js Application in IIS

Deploying a Vue.js application on Internet Information Services (IIS) might seem complex, but it’s actually straightforward when you follow the right steps. Whether you’re a beginner or an experienced developer, IIS provides a stable and scalable environment for hosting Vue.js applications (Deploy Vue.js on IIS).

In this guide, we’ll walk you through the step-by-step process of deploying your Vue.js application on IIS, ensuring smooth performance and accessibility.

Step 1: Build Your Vue.js Application

Before deploying your Vue.js app to IIS, you need to generate the production-ready files. Open your project folder and run:

npm run build

or

yarn build

This command will create a dist/ folder containing all the necessary static files for deployment.

Step 2: Install IIS on Your Windows Machine

If IIS is not installed, follow these steps to enable it:

1. Open Control Panel and go to Programs & Features.
2. Click on Turn Windows features on or off.
3. Find Internet Information Services (IIS) and enable it.
4. Click OK and wait for the installation to complete.

To verify the installation, open your browser and enter:

http://localhost

If IIS is installed correctly, you’ll see the default IIS welcome page.

Step 3: Configure IIS for Vue.js

Now that IIS is installed, follow these steps to host your Vue.js app:

3.1. Copy Your Vue.js Build Files

• Navigate to C:\inetpub\wwwroot (the default IIS root directory).
• Create a new folder, e.g., vue-app.
• Copy all contents from the dist/ folder into this newly created folder.

3.2. Add Your Website in IIS

1. Open IIS Manager (inetmgr in Run).
2. In the Connections panel, right-click Sites → Add Website.
3. Enter:
   • Site Name: VueApp
   • Physical Path: Browse and select the vue-app folder.
   • Port: Set to 8080 (or any available port).
4. Click OK to save the site configuration.

Step 4: Configure URL Rewrite for Vue.js

Since Vue.js is a Single Page Application (SPA), IIS must be configured to handle routing correctly.

1. Open IIS Manager and select your Vue.js site.
2. Click on URL Rewrite (install it if not available).
3. Click Add Rules → Blank Rule → Edit Rule Settings.
4. Set:
   • Match URL: .* (matches all requests)
   • Action Type: Rewrite
   • Rewrite URL: /index.html
5. Save the rule and apply changes.

This ensures that all routes are directed to index.html, allowing Vue Router to handle navigation.

Step 5: Restart IIS and Access Your App

Restart IIS by running:

iisreset

Now, open your browser and visit:

http://localhost:8080

Your Vue.js application should be up and running.

Deploying a Vue.js app on IIS provides a secure and scalable hosting solution. By following these steps, you can ensure your app runs smoothly on a Windows server.

If you’re looking for professional web development solutions, CodeHunger can help you build and deploy high-performance Vue.js applications effortlessly.