Search code examples
vue.jsgithub-pagesvue-routervue-cli

Deploy Vue to GitHub Pages. Error with vue-router


I was experiencing some trouble while deploying a Vue application build with vue-cli v3.0. to GitHub Pages. I'm using subtree to send the dist folder only to gh-pages branch. First the problem was that the assets where not found but I fixed it using baseUrl on vue.config.js. Now the problem is that the #app element is empty. I found out that if I don't use vue-router (render the view direct instead of using <router-view/>) the app works fine with GitHub pages. I believe there is some issue with the route path option but I'm unable to figure out how to fix it.

The repository with the issue is https://github.com/guizoxxv/vue-cli-deploy and the GitHub Page link is https://guizoxxv.github.io/vue-cli-deploy/

Thank you.


Solution

  • I believe I discovered the cause for this issue:

    As GitHub Pages URL is not served from the root

    https://guizoxxv.github.io/vue-cli-deploy/ has vue-cli-deploy/ after the root /

    I need to specify a base option for my app on vue-router options. Here is the documentation https://router.vuejs.org/api/#base