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.
Answer
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
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present