How to change basepath on deployment of Vue app

Question

I have a Vue 2.0 webapplication that runs without problems on my computer, but I can't seem to get it to work on a server without the app running on the root directory.

e.g: 'www.someserver.com/my-app/' instead of 'www.someserver.com/'.

I used the webpack-simple template which has this basic webpack configuration. How can I make sure that the app will load the files from the folder instead of the root?

Answer 1

On file vue.config.js

module.exports = {
  /* ... */
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}

On file router.js

/* ... */
import { publicPath } from '../vue.config'
/* ... */
export default new Router({
    mode: 'history',
    base: publicPath,
    /* ... */
})

Answer 2

Assuming your server is already serving your html/js bundles when you go to the url you want.... If you are using vue-router, you also need to set the base path there.

const router = new VueRouter({
  base: "/my-app/",
  routes
})