Deploying a vue-cli app to a subfolder

With the vue-cli we can quickly scaffold our next Vue app. When the app is production ready we simply do npm run prod to get the production ready files. Out of the box, the dist/ folder contains everything we need (an index.html and all assets including images, css and js). So we put this online and everything works right?

In theory, yes. For my usecase, no! Because I put everything in a subfolder on my server and the assets could not be found, arg.

Just changing the urls to the css file and the js file is possible but was only a half solution as assets required inside the css (images, fonts) still couldn’t be found.

Update due to release of Vue CLI 3
In the new Vue CLI version 3, we have to add the vue.config.js file to the root of the project (next to package.json) and let it export an object containing the options. The option we are looking for here is the baseUrl. I refer to the excellent docs for configuring Vue CLI 3 for the complete answer.

The solution below only applies to projects created with the vue-cli@2.x
The right solution is to change the webpack config to be able to get your code working in a subfolder.

  1. File to change: config/index.js
  2. Change assetsPublicPath from ‘/’ to ‘/your-subfolder/’  

Hope you enjoyed this quick tip!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! All posts
View all posts by Pim Hooghiemstra

12 thoughts on “Deploying a vue-cli app to a subfolder

      1. Pim Hooghiemstra Post author

        Hello Olek,

        I looked into this and come to the following conclusion: you probably use the Vue CLI 3, whereas this post was written before that was released. In other words, the tip I describe only applies to projects using the deprecated vue-cli@2.

        However, also for Vue CLI 3, it is possible to deploy your production app in a subfolder. According to the docs, see https://cli.vuejs.org/config/#vue-config-js, you have to add a file called vue.config.js to the root of your project (next to package.json). In this file you export an object containing the options.

        The option you are looking for here is called baseUrl.

        I hope this helps, I haven’t used this myself yet but it seems a quite simple solution. Let me know if it works for you!

        Reply
  1. Manish kumar

    Hi guys.
    I need your help for the correct way deploying vue.js on subfolder. I’ve already tried to change “assetsPublicPath’ on vue.config.js but no luck, instead I have weird result like this.

    1. Change assetsPublicPath into this:
    module.exports = {
    baseUrl: ‘/dkexchange/’
    }
    2. Change router file intto this :
    base: “dkexchange”,

    3. npm run build and the result:
    4 than upload file on server subfolder.
    5. showing blank page

    Reply
    1. Pim Hooghiemstra Post author

      Hey Manish,

      I am sorry that it doesn’t work in your situation but there may be more things specific to your situation that I am not aware of, so I am afraid I can’t help you with this issue.

      Reply
  2. Shah Faisal

    For newbie to Vue.js, This solution will save you hours who working in version 2x, Thanks to Pim. For 3.x, all the settings are now controlled in vue.config.js file. if it doesn’t exists, create one at root level of your application.

    module.exports = {
    publicPath: process.env.NODE_ENV === ‘production’ ? ” : ‘/’
    }

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *