5

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.

Escribe tu comentario
+ 2
1
115Puntos

Realice todos los pasos y al iniciar la página me da error 404… https://eima6.github.io/Mi-Pagina-Web/ He tratao de solucionarlo epro no veo error por ningún lugar… este es el link del repositorio https://github.com/Eima6/Mi-Pagina-Web

1
5687Puntos
3 años

Este tutorial es un ejemplo de como hacer Deploy de una aplicación de Vue.js en la rama por defecto para las GitHub Pages pero igual debes habilitar la opción de GitHub Pages.

Para habilitarlo debes ir a la configuración de tu repositorio Mi-Pagina-Web y buscar donde la parte de GitHub Pages y seleccionar la rama gh-pages como fuente del mismo.

Si no te funciona la parte del deploy puede que haya cambiado el Vue Cli 3 ya que fue hecho hace casi un año.