Como hacer deploy de una aplicación de Vue.js hacia GitHub Pages usando Vue CLI 3

En este tutorial vamos a hacer referencia al video “Enviando una aplicación con Vue.js a producción” del Curso Basico de Vue.js donde hacemos deploy de la PlatziMusic y aqui le muestro la manera de hacerlo utilizando Vue CLI 3:

1. En la raíz del proyecto crear el archivo vue.config.js:

touch vue.config.js

Dentro de vue.config.js pegar el codigo:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/platzimusic/'
    : '/'
}

Donde /platzimusic/ hace referencia al repositorio donde desplegue la aplicación.

2. En la raíz del proyecto crear el archivo deploy.sh

touch deploy.sh

Dentro de deploy.sh pegar el codigo:

#!/usr/bin/env sh
# abort on errorsset-e# build
npm run build

# navigate into the build output directorycd dist

git init
git add -A
git commit -m 'deploy'# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -

Deben reemplazar la palabra <USERNAME> por su usuario de GitHub y <REPO> por el nombre de su repositorio.

En caso de no tener configurado su cuenta de GitHub para conectarse via SSH debe reemplazar:

git push -f [email protected].com:<USERNAME>/<REPO>.git master:gh-pages

Por:

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

3. Abrir la terminal y moverse a la raíz del proyecto. Luego asignar el permiso de ejecución con el comando:

chmod +x deploy.sh

4. Finalmente ejecutar el comando deploy.sh con el comando:

./deploy.sh

Esperar que termine la ejecucion del script y abrir en el navegador nuestra aplicación https://<USERNAME>.github.io/<REPO>/

Aqui les dejo el ejemplo de la mia https://frankpenalo.github.io/platzimusic/

Ver aqui la documentación sobre Deployment con Vue Cli 3.