23 July, 2018

How to deploy a vue app into a subdirectory

I had a situation a few days ago when I needed to deploy two different Vue applications to live in the same domain, just like this:

http://domain.com/webapp/app-1
http://domain.com/webapp/app-2

I was using the new vue-cli (it’s amazing btw) and webpack, and by they bundle everything in order to be served from the root of a domain, as you can see in the image bellow. It should work perfectly until you move the application to another directory, as shown above.

Deploying your vue app into a  subdirectory

Well to change this default behavior of vue-cli, you need to edit the vue.config.js file in the directory of your application. If this file doesn’t exist, then create one and write the following code referencing your intended subdirectory as the value of the property baseUrl:

// vue.config.js

module.exports = {
     baseUrl: './webapp/app-1'
}

Working with different environments

What if you want the baseUrl of your application to change when according the environment, development and production? Easy, in order to achieve this, we use a conditional ternary operator over process.env.NODE_ENV, after all vue-cli is a Nodejs program:

// vue.config.js

module.exports = {
     baseUrl: process.env.NODE_ENV === 'production' 
        ? './webapp/app-1'
        : './my-computer'
}


I hope this post help you, and I would love to hear your thoughts about this topic in the comments. Thank you.

OTHER ARTICLES