Deploy Vue CLI Project to Github Pages

Note: This is for Vue CLI 3

Setup vue.config.js

Manually create a vue.config.js under root folder

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/REPO-NAME/'
    : '/'
}

Deploy to gh-pages Branch

Create a deploy.sh file

#!/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 main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

I actually pull this off from Vue CLI, but it doesn’t work for me.

This was cause by my gh-pages brach name. Uncomment line 23

# git push -f git@github.com:<USERNAME>/<REPO-NAME>.git main:gh-pages

and change main to master will fix the problem.

git push -f git@github.com:<USERNAME>/<REPO-NAME>.git master:gh-pages