时间戳

首页 > 解决方案 > Nuxt（或节点）混合桌面和移动环境（使用桌面+移动数据渲染页面）

javascript - Nuxt（或节点）混合桌面和移动环境（使用桌面+移动数据渲染页面）

问题描述

我有一些模板代码的桌面/移动特定部分，例如：

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

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

isMobile是一个存储在里面的变量vuex。

对于设备检测，我使用nuxtjs/device。

问题：如果我同时打开桌面版和移动版，渲染的html是混合的，即桌面版显示桌面页面+移动特定的东西，移动版显示移动页面+桌面特定的东西。

我最初认为是 Nginx 内部某个地方的问题（可能与缓存部分有关），但我只是检查了“npm run start”，发现这个问题是特定于 nuxt（或节点）的。

当前生产服务器结构：

-> nginx-proxy（1 个容器）

-> 带有 LetsEncrypt 证书和每个域缓存的 nginx（1 个容器）

-> 带有运行“npm run start”的附加 nuxt 代码的节点（5 个容器，每个域一个）。

目前我知道的最简单的方法是为桌面版和移动版分别提供一个 docker 容器，但现在我已经为 5 个不同的域（通过 API 接收特定设置）提供了 5 个容器，并且未来域的数量将会增长，所以如果可能的话，我想避免每个域有 2 个容器（移动/桌面）。

有没有办法为桌面和移动版本保留一个容器？也许我配置错误？

标签： javascriptnode.jsvuejs2nuxt.js

解决方案

推荐阅读