Implementación de Producción (Deployment) ​

Desarrollo vs. Producción ​

Durante el desarrollo, Vue proporciona una serie de características para mejorar la experiencia de desarrollo:

• Advertencia de errores y problemas comunes
• Validación de props / eventos
• Hooks de depuración de reactividad
• Integración con herramientas de desarrollo (Devtools)

Sin embargo, estas características se vuelven inútiles en producción. Algunas de las comprobaciones de advertencia también pueden ocasionar una pequeña sobrecarga de rendimiento. Al desplegar en producción, deberíamos eliminar todas las ramas de código de desarrollo no utilizadas para reducir el tamaño de la carga útil y mejorar el rendimiento.

Sin Herramientas de Compilación ​

Si estás utilizando Vue sin una herramienta de compilación cargándolo desde un CDN o un script auto-alojado, asegúrate de utilizar la compilación de producción (archivos dist que terminan en .prod.js) al desplegar en producción. Las compilaciones de producción se minifican previamente con todas las ramas de código de desarrollo eliminadas.

• Si usas una compilación global (accediendo a través de la global Vue): usa vue.global.prod.js.
• Si usas la compilación ESM (accediendo a través de las importaciones nativas de ESM): usa vue.esm-browser.prod.js.

Consulte la guía de archivos dist para obtener más detalles.

Con Herramientas de Compilación ​

Los proyectos creados a través de create-vue (basado en Vite) o Vue CLI (basado en webpack) están preconfigurados para compilaciones de producción.

Si utilizas una configuración personalizada, asegúrate de que:

1. vue resuelve a vue.runtime.esm-bundler.js.
2. Los indicadores de características en tiempo de compilación están configurados correctamente.
3. process.env.NODE_ENV se reemplaza con "production" durante la compilación.

Referencias adicionales:

• Guía de compilación en producción de Vite
• Guía de implementación de Vite
• Guía de implementación de Vue CLI

Seguimiento de Errores en Tiempo de Ejecución ​

El controlador de errores a nivel de aplicación se puede usar para informar errores a los servicios de seguimiento:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // informar de un error a los servicios de seguimiento
}

Servicios como Sentry y Bugsnag también ofrecen integraciones oficiales para Vue.