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.
- File to change: config/index.js
- Change assetsPublicPath from ‘/’ to ‘/your-subfolder/’
Hope you enjoyed this quick tip!
Thank you. I spent an hour reading longer answers and this did it exactly.
I do my VueJS app by vue-cli and I haven’t got a config folder. How can I change “assetsPublicPath” ?
Hi Olek,
I will look into this and come back to you.
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!
thanks for this answer. you have helped me a lot
Deploying a vue-cli app to a subfolder Not working…
Hello Manish Kumar,
Could you be a bit more specific about what happens in your situation?
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
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.
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’ ? ” : ‘/’
}
Great to have a working example for Vue 3 as well. Thanks Shah.
thank you, i was reading things that was not working