Deploy de aplicaciones Vue.js

En este artículo te mostraremos la manera de subir a tu hosting una aplicación creada en Vue.js utilizando npm.

Crearemos desde cero una aplicación de pruebas y la subiremos al servidor.

Creación de app de pruebas en tu entorno local (tu PC)

Es necesario que tengas previamente instalado Node.js en tu PC el cual incluye el comando "npm".

1. En tu PC de desarrollo, instala "npx" ejecutando el siguiente comando desde una consola (en Windows: CMD o PowerShell, en Linux o Mac: Terminal):
   

   npm install -g npx

2. Crea una aplicación de pruebas, ejecutando:
   

   npx create-vue my-vue-app

   
   
   
   
3. Ingresa al directorio de la aplicación:
   

   cd my-vue-app

4. Instala las dependencias:
   

   npm install

5. Para probarla en tu PC, puedes ejecutar el siguiente comando que la compilará y creará un servidor local usando Node.js para pruebas:
   

   npm run dev

   
   
   
   
6. Revisa el output anterior y abre en tu explorador web en la URL indicada. En este ejemplo es http://localhost:5173 y verás el siguiente contenido en tu navegador:
   
   
   
   

Deploy en servidor web

Una vez que hayas creado tu aplicación en tu PC y estés listo para subirla al servidor, sigue estos pasos:

1. En tu PC local ejecuta el siguiente comando dentro de la carpeta de tu aplicación. Esto compilará la aplicación para luego poder subirla al entorno en producción (tu hosting):
   

   npm run build

   
   Este comando se ejecuta siempre en el entorno de desarrollo local (tu PC) y puede que falle si lo ejecutas directamente en el servidor, ya que es posible que no tenga suficientes recursos tu cuenta para ello.
   
   
   
   
2. Cuando termine verás una nueva carpeta llamada "dist":
   
   
   
   y el contenido se verá algo así:
   
   
   
   
3. Ingresa a la carpeta y comprime su contenido en un archivo .ZIP (en este ejemplo llamado "dist.zip"):
   
   
   
4. Sube el contenido de esta carpeta al directorio web raíz "public_html" de tu hosting. Puedes usar el Administrador de archivos de cPanel.
   
   
5. Una vez subido, dentro del administrador de archivos haz clic derecho sobre el archivo ZIP subido y haz clic en "Extract" para extraer el contenido:
   
   
   
   
6. Si todo salió bien, verás una estructura similar a la siguiente:
   
   
   
   Los archivos XXX.shtml son las páginas de error personalizado que ya vienen en tu hosting por defecto. No debes preocuparte de ellos.
   
   
7. Si utilizas "Vue Router" es posible que debas crear o editar el archivo ".htaccess" en el directorio web raíz "public_html" de tu cuenta y agregar al principio el siguiente contenido:
   

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule . /index.html [L]
   </IfModule>

   Si tienes una subcarpeta con una aplicación de Node.js u otra subcarpeta ajena a Vue.js, deberás crearle un archivo ".htaccess" dentro de ésta con la sentencia "RewriteEngine off" para que sea ignorada por Vue Router y puedas lograr acceder a dicha subcarpeta correctamente.
8. ¡Listo! Ahora ingresa a tu dominio y si todo salió bien, tu aplicación estará lista:
   
   
   
   Recuerda que tu dominio debe estar registrado y delegado a tu hosting para que pueda ser accesible vía web.