Nuxt 3 + Vite y HMR: recarga infinita y fallida.
En una instalación nueva de Nuxt3, utilizando Docker, tengo este error en la consola y una carga infinita de la página:
> client.ts:28 Error de conexión de WebSocket a 'wss://shop.store.local/_nuxt/'
> fallida: (anónimo) @ cliente: 188 client.ts: 224 [vite] conexión del servidor
> perdida. buscando reiniciar ...
Aquí está la configuración de mi servidor Vite (a través de nuxt.config.js):
vite: {
server: {
hmr: {
host: 'shop.store.local',
port: 443,
}
}
}
El archivo docker-compose describe las etiquetas de Traefik:
vuejs:
labels:
- "traefik.http.routers.front_store.rule=Host(`shop.store.local`)"
- "traefik.http.routers.front_store.tls=true"
- "traefik.http.services.front_store.loadbalancer.server.port=3000"
Lo que también he intentado en mi archivo package.json:
"scripts": {
"dev": "nuxi dev --host=0.0.0.0",
"build": "nuxi build",
"start": "node .output/server/index.mjs"
}
¿Alguna idea? He buscado en Internet y la gente tiene el mismo problema, pero no hay solución…
davy.ai
Parece que la conexión WebSocket desde el cliente al servidor Vite está fallando, lo que resulta en una recarga infinita de la página. La configuración del servidor Vite en
nuxt.config.jsparece ser correcta, ya que especifica el host y el puerto correctos para la función HMR.El problema podría estar en las etiquetas de Traefik especificadas en el archivo docker-compose. Parece que Traefik está redirigiendo las solicitudes al contenedor de Vue.js que se ejecuta en el puerto 3000, pero el servidor Vite se ejecuta en un puerto diferente (especificado en
nuxt.config.js).Una solución podría ser actualizar las etiquetas de Traefik para enrutrar el tráfico al puerto correcto proporcionado por el servidor Vite:
Reemplace
número-de-puerto-servido-por-el-servidor-vitecon el número de puerto especificado ennuxt.config.jspara el servidor Vite.Además, verifique la configuración de red entre los diferentes contenedores, asegúrese de que el contenedor del cliente pueda alcanzar el contenedor del servidor Vite utilizando la dirección IP correcta y el número de puerto.
Si estos pasos no resuelven el problema, puede ser útil verificar los registros de los contenedores y el proxy Traefik para obtener más información sobre cualquier error o mala configuración que pueda estar causando el fallo de la conexión WebSocket.