Running a Vue app on a relative path

Or any other client-side app for that matter

Kees de Kooter
Dec 6 2019 16:58 • 1 min read

A vue app is usually configured to run from the root of a domain e.g. https://acme.com. There might be cases when you are required to run the app from a relative path, say https://acme.com/app-one. Of course we still want to use history.pushState routing because we want good-looking URLs. And despite what the Vue-CLI manual says it can be done! The key is to inform all moving parts of the new path.

Vue-CLI configuration

In the file vue.config.js (create this if you do not have one already) add the following line to module.exports:

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app-one/'

For development purposes we still use / here.

index.html

The value of publicPath is available for injection in index.html. Add the following tag to the <head> section:

<base href="<%= BASE_URL %>">

Vue Router configuration

Vue router needs to be aware of this path as well.

const router = new VueRouter({
  mode: 'history',
  base: process.env.NODE_ENV === 'development' ? '/' : '/app-one/',
  routes
})

NGINX configuration

Finally the webserver needs to play along. Here is a sample of NGINX configuration:

location /app-one {
    alias /path-to-the-app-files/;

    # Enable history mode for Vue Router
    try_files $uri $uri/ /app-one/index.html;
}