[Vuejs]-Correct NodeJS server for Vue.js application

by

0đź‘Ť

You need to setup your server to redirect users to the appropriate server location. Please read the Vue Router – HTML5 History Mode docs.

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!

The main thing that you need to do is have all routes lead to the root route. Alternatively, since you are using Express, you can leverage the connect-history-api-fallback which the Vue Router docs recommend.

Leave a comment