Deploying VueJS to GitHub Pages - vue.js

Question

I have followed the guide to deploy a VueJS app to GitHub pages step by step and it throws an error GET https://jedrekdomanski.github.io/bikeramp-front/ 404 ()
My repo (gh-pages branch): https://github.com/jedrekdomanski/bikeramp-front/tree/gh-pages
Website: https://jedrekdomanski.github.io/bikeramp-front/
script
https://cli.vuejs.org/guide/deployment.html#github-pages
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run build
# navigate into the build output directory
cd dist
# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# if you are deploying to https://<USERNAME>.github.io
# git push -f git#github.com:<USERNAME>/<USERNAME>.github.io.git master
# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git#github.com:jedrekdomanski/bikeramp-front.git master:gh-pages
cd -
vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/bikeramp-front/'
: '/'
}
I am serving the app from gh-pages, like they said.
Source
Your GitHub Pages site is currently being built from the gh-pages branch.
What am I doing wrong?
package.json
{
...
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"chart.js": "^2.7.3",
"vue": "^2.4.4",
"vue-chartjs": "^3.4.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.11",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}

Answer 1

Maybe try to set baseUrl to full path instead of relative path, since there is limitations for relative path
Refer: https://cli.vuejs.org/config/#publicpath
Update:
Interesting that I notice after switching to full path, it works, then when switch back to relative path, it seems still working.

Answer 2

Here is how I deployed my Vuejs App to a github page:
I add a new file in the root project (next to package.json, ...): vue.config.js
I write inside:
module.exports = {
publicPath: "/something/",
outputDir: "docs",
};
Such that your url will be:
name.github.io/something/
the "docs" gives the output Folder for the npm run build because Github allows you just to choose between /(root) and /docs for the GitHub Page. So in this case on GitHub in the Settings of your project, go to Pages and for Source select /docs.
After that you have just to write following git order:
yourProject(main)$ npm run build
git add .
git status (to be sure)
git commit -am "your commentar"
git branch -M main (only if yourProject(master)is written instead of sfes(main) => GitHub changed master to main)
git push -u origin main