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! Latest post
Build a progressive web app using Vue CLI 3

4 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

Leave a Reply

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