Vue Router Navigation in IIS


Trying to understand why my routes are failing when I refresh my page on a VueJS application hosted on IIS.

Here’s my route defined:

const routes = [
  { path: '/home', component: Home },
  { path: '/users', component: Users },
  { path: '/about', component: About },
  { path: '*', redirect: '/home' }

Basically, I’ve defined the route of my app in a local IIS server as follows:


When I enter the above url in the browser’s address bar, the routes fire up and the url becomes:


Now, clicking on the different elements defined on my app, I am able to navigate just fine, i.e.:


The odd issue I am facing is that when I hit the refresh button (F5), the app returns an Error 404 Not Found.

If I simulate the application using NPM Run Dev command, it opens up the browser fine and I can easily navigate to all the other links and even if I hit the refresh button, I am not getting an error.

Wondering whether others have experienced such issue, or if possible, kindly guide me which area I need to look at to make this work on an IIS hosting environment.


Since you use history mode, you have to configure your webserver to react correctly to those routes:


Thanks for pointing me in the right direction @LinusBorg. Even though there was nothing specific for IIS in the link you provided, I was able to create one specific to my setup.

Hi @AngeloAnolin, could you share with us your IIS URL rewrite rule? It will also be very helpful for you to create a PR for this to v-router’s document.

Here’s a gist containing the bare minimum web.config files I have for the Vue app I have that’s hosted in IIS.

Web Configuration for Vue Applications Hosted in IIS

I’ll try to add it to the Vue-Router’s repository later.



I solved it by adding:

location / {
##########here line 1!!!
try_files $uri $uri/ /index.html;
##### others lines


in the nginx. Add when starting the code, if it does not work.


When you tried to host in IIS did you use a virtual directory or a an application folder?

I am having similar issues.

I would like to host my vue.js /dist folder in a virtual directory under IIS.
So far all I get is a blank page and in the browser console there are several 404 errors

look this helped me:
Hosting-vue-js-spa to IIS

1 Like


I’m hosting my webpage using Winhost (if that helps).

  • I created my app using the vue ui interface, included vue-router and history mode for proper URLs
  • Based on suggestion above, I’ve added web.config to the root folder of my Vue JS application, run build, copy /dist folder contents to site FTP
  • Can navigate perfectly fine to the root site and click on router-link links
  • Refresh page results in 404 error
  • Direct URL to Contact page for example results in 404 error

I’ve followed suggestion from @DhruvAerosol and redeployed but no improvement.

Any help would be appreciated. :sweat_smile:

@sn0wf0x333, If you have just issue with refresh, there must be issue with url-rewrite.
you need to double check the installation and working of url-rewrite.

Worked for me.