Tengo algunas partes específicas de escritorio/móvil de código de plantilla, algo así como:

 <div v-if="!isMobile"> {{ Show something desktop specific }} </div> <div v-if="isMobile"> {{ Show something mobile specific }} </div>

isMobile es una variable almacenada dentro vuex .

Para la detección de dispositivos, uso nuxtjs/device .

El problema: si abro simultáneamente las versiones de escritorio y móvil, el html renderizado se mezcla, es decir, la versión de escritorio muestra la página de escritorio + cosas específicas del móvil y la versión móvil muestra la página móvil + cosas específicas del escritorio.

Inicialmente pensé que el problema estaba en algún lugar dentro de Nginx (probablemente con parte de caché), pero simplemente verifiqué "npm run start" y descubrí que este problema es específico de nuxt (o nodo).

Estructura del servidor de producción actual:

-> nginx-proxy (1 contenedor)

-> nginx con certificados LetsEncrypt y caché por dominio (1 contenedor)

-> nodo con código nuxt adjunto que ejecuta "npm run start" (5 contenedores, uno por dominio).

Por ahora, la forma más fácil que conozco es tener contenedores docker separados para las versiones de escritorio y móvil, pero en este momento ya tengo 5 contenedores para 5 dominios diferentes (que reciben configuraciones específicas a través de API) y en el futuro la cantidad de dominios crecerá. , por lo que, si es posible, me gustaría evitar tener 2 contenedores (móvil/escritorio) por dominio.

¿Hay alguna manera de mantener un contenedor para las versiones de escritorio y móvil? ¿Tal vez desconfiguré algo?