Hosting Vue JS SPA build on IIS

4/5/2019 6:44:44 PM

If you use vue-router in your Vue JS SPA web application, your app router will route navigational paths to virtual folders and files. Note that there are no physical asset for these URLs, thus, if you were to host your web app directly under IIS, you will get 404 errors if you navigate directly to these URLs or when you refresh/reload the page.

Option 1:

If you use vue-router in your Vue JS SPA web application, your app router will route navigational paths to virtual folders and files. Note that there are no physical asset for these URLs, thus, if you were to host your web app directly under IIS, you will get 404 errors if you navigate directly to these URLs or when you refresh/reload the page. You will need to set URL rewrite rules for IIS to manage these URLs properly. Also, you will need to setup IIS as such:

1. Build your Vue JS SPA app(s) using 'npm run build'

2. In IIS, create new website pointing to the '/dist' folder of your web app

3. Create a new Web.config file on the root folder with the following lines of codes:

At this point you should be able to navigate to your new website URL and your Vue JS SPA routes should work with refresh and reloads. Do leave message down below if you need to discuss anything. Hope this helps :)

Option 2: HTML5 History Mode

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

To get rid of the hash, we can use the router's history mode, which leverages the history.pushStateAPI to achieve URL navigation without a page reload:

const router =newVueRouter({
mode:'history',
routes:[...]})

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your index.html file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:

Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched. Check out the Vue server side rendering documentation for more information.

Hosting Vue JS SPA build on IIS

Administrator

4/5/2019 6:44:44 PM

1/1/0001 12:00:00 AM

https://yoong.vn/

If you use vue-router in your Vue JS SPA web application, your app router will route navigational paths to virtual folders and files. Note that there are no physical asset for these URLs, thus, if you were to host your web app directly under IIS, you will get 404 errors if you navigate directly to these URLs or when you refresh/reload the page.