VueJS not working when hosted externally

Question

I've been developing a little app in VueJS, and it seemed to be working fine while developing with a local webserver. But somehow it doesn't load at all when I deploy it to Github pages. I've also tried deploying it on my own server, that doesn't work either.

The Javascript code executes fine, but somehow the Vue code doesn't.

Link to the website where I've deployed it

Github repository

Answer 1

If you are using the default vuejs/vue-router setup and you are publishing to a subfolder, in your case: http://example.com/folder/ , vue-router has an an option to modify the base .

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/components/Home'

Vue.use(Router)

const routes = [
 { path: '/', name: 'Home', component: Home }
]

export default new Router({
 routes,
 mode: 'history',
 base: '/folder'
})

Answer 2

I've found out the problem, it has to do with routing on my specific setup.

When Vue's router has routes defined on the server, it will use the routes' path that has been given. My problem was using Vue router with the application being deployed in a folder. So when you execute the app, the current path will point to http://example.com/folder/ while your route points to http://example.com/ in my case.

I solved the problem by defining an alternate route should another fail for some reason.

routes: [
    { path: '/', name: "CollectionMarker", component: CollectionMarker },
    { path: '/cars', name: "CarMarker", component: CarsComponent },
    // This is the path that you need to include, it will redirect when no route has been found
    { path: "*", redirect: "/" }
]