Deploy Vue to GitHub Pages. Error with vue-router

Question

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.

Roland · Answer 1 · 2020-05-10T20:21:09.167

5

Update 2020

baseUrl is Deprecated since Vue CLI 3.3, please use publicPath instead.

If you are using Vue CLI >= 3.3 you might want to check out this vue-cli plugin which automates github pages deployment using github actions.

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set baseUrl to '/my-app/'. So :

Create a new file in root directory of your project and name it ‘vue.config.js’
In ‘vue.config.js’ file paste the following code:

module.exports = { baseUrl: ‘/my-first-project/’ }

NOTE: in baseUrl inside the // chars you have to put the name of your project.

Read more here

Also, read a full article how to deploy vue.js project in github pages here

edited May 10 '20 at 20:21

answered Oct 14 '18 at 10:16

Roland

24,554
4
99
97

The `baseUrl` property is now deprecated. We should use `publicPath` instead. https://cli.vuejs.org/config/#publicpath – Nicke Manarin May 10 '20 at 01:27
1

The OP asked about vue-cli 3.0. `baseUrl` deprecated in 3.3. However I updated my answer – Roland May 10 '20 at 20:23
Yes, I saw that the question was made back in '18. It was just a reminder that it is now deprecated. :) – Nicke Manarin May 10 '20 at 23:22

score 4 · Answer 2 · answered Jan 19 '22 at 06:50

For Vue3, Please make the configuration as below:

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory('/your-github-repo/'),
  routes: [
   // put your routes
  ]
});

For Vue2, Please make the configuration as below:

import VueRouter from 'vue-router';

const router = new VueRouter({
  mode: 'history',
  base: '/your-github-repo/',
  routes: [
    // put your routes
  ]
});

If still problem persists, please create vue.config.js file in root location of your vue app and add the following code:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? '/your-github-repo/' // note the trailing slash
  : '/',
}

score 3 · Accepted Answer · answered Oct 11 '18 at 01:16

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

score 0 · Answer 4 · answered Jun 06 '18 at 08:52

0

can you try this in your main.js

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
});

answered Jun 06 '18 at 08:52

Georgi Antonov

1,581
21
40

score 0 · Answer 5 · answered Apr 20 '21 at 15:21

0

As they said baseUrl is deprecated, use publicPath

module.exports = { publicPath: '/your-repo/' }

answered Apr 20 '21 at 15:21

yaeru

1

Deploy Vue to GitHub Pages. Error with vue-router

5 Answers5

Linked