Vue Router Navigation in IIS

Hi,

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:

http://myserver/TestApp

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

http://myserver/TestApp/home

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

http://myserver/TestApp/home
http://myserver/TestApp/users
http://myserver/TestApp/about

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.

Thanks.

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

https://router.vuejs.org/en/essentials/history-mode.html

2 Likes

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.

3 Likes

Hello,

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.

Hi,

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

Hi,

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:

HI,
@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.