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 firstname.lastname@example.org
The right solution is to change the webpack config to be able to get your code working in a subfolder.
- File to change: config/index.js
- Change assetsPublicPath from ‘/’ to ‘/your-subfolder/’
Hope you enjoyed this quick tip!