Nuxt单容器适配桌面移动端出现渲染内容混杂问题如何解决

问题根因 #

你遇到的桌面/移动端内容混杂问题本质是Nuxt SSR 服务端状态共享污染，完全可以单容器同时支撑两端渲染，不需要拆分部署两套容器。
问题核心出在Vuex的实例化逻辑：如果你的Vuex是全局单例模式，服务端处理完第一个移动端请求后，isMobile会被标记为true，后续同一实例处理的桌面端请求会直接读取到残留的状态值，最终输出错误的渲染结果。你直接跑npm run start也能复现问题，也印证了是服务端状态污染的问题。

修复方案 #

1. 修正Vuex实例化规则 #

将Vuex的声明改为工厂函数模式，确保每次请求都生成全新的Vuex实例，避免状态跨请求复用：

// store/index.js 错误写法（全局单例，跨请求共享状态）
export const store = new Vuex.Store({
  state: { isMobile: false },
  mutations: { /* 你的逻辑 */ }
})

// 正确写法（每次请求返回独立实例）
export const createStore = () => {
  return new Vuex.Store({
    state: { isMobile: false },
    mutations: {
      SET_DEVICE(state, isMobile) {
        state.isMobile = isMobile
      }
    }
  })
}

修改后需要在Nuxt入口文件中，每次请求都调用createStore生成新实例传入即可。

2. 简化设备判断逻辑（可选，推荐） #

nuxtjs/device已经自动为每个请求注入了独立的$device实例，不需要额外把设备状态存在Vuex中，直接在模板中调用即可，从根源避免状态污染的可能：

<div v-if="!$device.isMobile">
  {{ 桌面端专属内容 }}
</div>

<div v-if="$device.isMobile">
  {{ 移动端专属内容 }}
</div>

3. 配套Nginx缓存规则修正（后续开启缓存时需要配置） #

如果你之后要恢复Nginx缓存功能，需要把设备特征加入缓存key，避免桌面端和移动端的缓存内容混用：

# 示例配置，将UA加入缓存key
proxy_cache_key $host$uri$is_args$args$http_user_agent;

如果担心缓存条目过多，也可以用Nginx的map指令提前把UA分类为移动端/桌面端，用分类值替代完整UA加入缓存key即可。

验证方法 #

修复完成后直接启动npm run start，用桌面浏览器和移动端模拟器交替访问同一页面，确认两端渲染内容正常，不会出现混杂即可。

内容的提问来源于stack exchange，提问作者TitanFighter