<!DOCTYPE html>
Cómo publicar un proyecto Vite con Vue en GitHub Pages
Publicar un proyecto Vite con Vue en GitHub Pages es una forma sencilla de mostrar tu trabajo al mundo de una manera rápida y accesible. En este artículo, te explicaremos paso a paso cómo hacerlo.
Paso 1: Crear un proyecto Vite con Vue
Lo primero que debes hacer es crear un proyecto Vite con Vue. Puedes hacerlo fácilmente utilizando la CLI de Vite:
“`bash
npm create vite@latest my-vue-project
cd my-vue-project
npm install
“`
Paso 2: Configurar el proyecto para GitHub Pages
Una vez que tienes tu proyecto Vite con Vue creado, necesitas configurarlo para que funcione correctamente en GitHub Pages. Para ello, debes seguir estos pasos:
- En el archivo `vite.config.js`, asegúrate de que tienes configurado el `base` correctamente. Debe ser el nombre del repositorio en GitHub en el que vas a publicar el proyecto:
- Añade un archivo llamado `vue.config.js` en la raíz del proyecto con el siguiente contenido:
- Actualiza tus scripts de `package.json` para que tengan en cuenta la variable de entorno de producción:
“`javascript
export default {
base: ‘/mi-repositorio-en-github/’
}
“`
“`javascript
module.exports = {
publicPath: process.env.NODE_ENV === ‘production’
? ‘/mi-repositorio-en-github/’
: ‘/’
}
“`
“`json
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“deploy”: “NODE_ENV=production vite build && gh-pages -d dist”
}
“`
Paso 3: Publicar el proyecto en GitHub Pages
Una vez que tienes tu proyecto configurado correctamente, es hora de publicarlo en GitHub Pages. Sigue estos pasos para hacerlo:
- Crea un repositorio en GitHub para tu proyecto Vite con Vue
- Sube tu proyecto a GitHub utilizando los comandos git
- Ejecuta el script `deploy` que configuraste anteriormente en tu proyecto:
- Visita la dirección `https://username.github.io/reponame/` para ver tu proyecto publicado en GitHub Pages
“`bash
npm run deploy
“`
Conclusión
Publicar un proyecto Vite con Vue en GitHub Pages es un proceso sencillo que te permitirá mostrar tu trabajo de forma rápida y accesible. Sigue los pasos que te hemos explicado en este artículo y en poco tiempo tendrás tu proyecto publicado y listo para ser compartido con el mundo.
Muchas gracias bro, me sirvió para poder visualizar mi pagina, solo que tengo un problema con que se visualicen las imagenes, pero lo importante es que funciono ,
Este video esina Joyaaaaaa 🎉 felicidades bro !
Thank you 😘
Excelente video, funciona 100% 👍
Recien acabo de "Descubrir" tu Canal y esta muy interesante, porq hay otros videos pero ya estan Obsoletos,, Gracias me susCribo…
Buen video 😮
Justo lo que estaba buscando
Like y nuevo sub
Me agrado la forma en la que da la explicación, muy buen vídeo
excel en té 👍(❁´◡`❁) (●'◡'●)👍
Entendible y excelente video c:
Excelenteeeeeeeee
Excelente video si pude subirlo:)
Muy buen video 🙂
Excelente video