Nuxt / Vue JS 页面在桌面和连接 WiFi 的移动设备上渲染良好，但在 4G/5G 设备上却不行。知道如何解决这个问题吗？

Posted 2023-02-16

【中文标题】Nuxt / Vue JS 页面在桌面和连接 WiFi 的移动设备上渲染良好，但在 4G/5G 设备上却不行。知道如何解决这个问题吗？

【英文标题】：Nuxt / VueJS Page Rendering Fine on Desktop & WiFi-connected Mobile Devices, but not on devices on 4G/5G. Any idea how to fix this?

【发布时间】：2021-12-07 06:16:49

【问题描述】：

我遇到了一个奇怪的问题，页面渲染可以在移动设备上运行，但是当 WiFi 断开连接时，图像不再加载。我对此感到困惑，尽管我承认我不太熟悉 s-s-r/CR 最佳实践。

我什至安装了nuxt-user-agent 代理，试图减少加载的一些不必要的资源，因为我怀疑这是一种减少数据使用的移动设备机制。

现在我开始怀疑鼠标悬停/悬停的 javascript 注入是否在其中发挥了作用——但这并不能解释为什么它可以在连接到 WiFi 的设备上工作。

感谢您的所有帮助。相关代码：

组件：

    <vue-masonry-wall :items="projects" :options="options">

      <template v-slot:default="item">
        <div  v-if="$ua.isFromPc()" class="item cursor-pointer" v-on:click="changepage(item.url)">
          <img :src="item.image" @mouseover="item.image = item.hoverimg" @mouseout="item.image = item.originalimg" style="width:100%;"/>
        </div>
        <div v-else>
            <img :src="item.image" style="width:100%;" v-on:click="changepage(item.url)"/>
        </div>
      </template>
    </vue-masonry-wall>

数据：

    data() 
      return 
        projects: [
            url: '/app/#/video/1/', image: 'foo1.jpg', hoverimg: 'foo1.webp', originalimg: 'foo1.jpg' ,
            url: '/app/#/video/2/', image: 'foo2.jpg', hoverimg: 'foo2.webp', originalimg: 'foo2.jpg' ,
            url: '/app/#/video/3/', image: 'bar1.jpg', hoverimg: 'bar1.webp', originalimg: 'bar1.jpg' ,
            
            ...
        
            ]

已安装：

    async mounted () 
        this.$nextTick(() => 
            this.projects = this.projects
        )

Nuxt 配置（留在我认为可能相关的部分）：

export default 
  s-s-r: false,
  router: 
    base: './',
    mode: 'hash'
  ,
  target: 'static',
  head: 
    meta: [
        charset: 'utf-8'
      ,
      
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      ,
      
        hid: 'description',
        name: 'description',
        content: ''
      ,
      
        name: 'format-detection',
        content: 'telephone=no'
      
    ],

  ,

  plugins: [
    '~/plugins/vue-tooltips.js',
    '~/plugins/vue-masonry-wall.js',
    '~/plugins/vue-skeleton-loader.js'
  ],

  components: true,

  buildModules: [
    '@nuxtjs/tailwindcss',
  ],

  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/strapi',
    '@nuxtjs/markdownit',
    'nuxt-user-agent',
    ['@nuxtjs/proxy', 
      ws: false
    ]
  ],

  strapi: 
    entities: ['categories', 'projects', 'uploads'],
    url: 'theurlishere'
  

  build: 
    publicPath: 'https://mydomain.tld/app',
    postcss: 
      plugins: 
        'postcss-custom-properties': false
      
    
  

需要注意的一点 - 图像文件是从具有不同域的不同服务器中提取的（因此 CORS 目前已关闭。我认为）。显然这不是一个完整的生产版本，安全/强化很快就会到来。你可以看到我尝试为 Strapi 公共上传创建代理，但最终失败了，只是最终使用了 localhost 上的图像。

如果有人想了解一些调试工具：tinyurl.com/erzbh9m

另外，我很开放，实际上非常感谢任何提出更好做法的人，因为哦，伙计，自从 webdev 和景观发生了很大变化已经好几年了。

【问题讨论】：

如果我打开你分享的链接，我可以看到即使在桌面 Firefox 上也没有任何图像（从 api 加载）加载

啊！抱歉，我将假设它是 Strapi 的身份验证错误。让我尽快解决这个问题。

@MichalLevý 好吧，这很奇怪。很确定我向公众开放了上传/响应图像插件的身份验证，但我在 *** 浏览器上得到了 404。不过，在我的桌面上仍然可以 100% 正常工作。让我尝试调试一下，对此感到抱歉。

好吧，看起来我在 nginx 或 Strapi 端有一些严重的错误配置。 public/uploads 中的经过身份验证的用户肯定可以访问文件，但我现在正在努力弄清楚为什么未经身份验证的用户无法访问它——此外，我认为返回 404 错误很奇怪401 或至少 500 错误。

【参考方案1】：

感谢@Michal Levý 指出桌面浏览器上没有为他加载任何图像。

我觉得自己很蠢。

修复了 Nginx 反向代理配置的一些问题，一些中间件配置，以及将 ENV 设置为生产环境，以及在修复过程中的某个地方。真是头疼。

【讨论】：

如果可以，请随时接受这个答案！