[Vuejs]-VueJS not working when hosted externally

by

3👍

✅

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'
})
👤mejiamanuel57

1👍

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: "/" }
]
👤Teun

Leave a comment