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.

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
Local Laravel development and SSL on Homestead

Leave a Reply

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