Empaquetado de proyectos Vue3

Cuando estés listo para publicar la aplicación en un entorno de producción, necesitas empaquetar el proyecto Vue.

Usa el siguiente comando para empaquetar el proyecto Vue:

npm run build

Ejecuta el comando anterior, la salida es la siguiente:

Después de completar la ejecución, se generará undistdirectorio, que generalmente contiene el archivo index.html y el directorio static. El directorio static contiene archivos estáticos js, css y el directorio de imágenes images (si hay imágenes).

Si abres index.html con doble clic, la página podría verse en blanco en el navegador. Para que se muestre correctamente, debes modificar las rutas de los archivos js y css en el archivo index.html.

Por ejemplo, al abrir el archivo dist/index.html vemos que las rutas de css y js son rutas absolutas:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

Cambiamos las rutas de los archivos js y css a rutas relativas:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

Así, al hacer doble clic en el archivo dist/index.html podrás ver el efecto en el navegador.