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

Question

我运行遇到了一个奇怪的问题，页面呈现在移动设备上可以正常工作，但当 WiFi 断开连接时，图像就不再加载。我对此感到困惑，尽管不可否认我不太熟悉 SSR/CR 最佳实践。

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

现在我开始怀疑 mouseover/hover 输出的 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 {
  ssr: 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 暂时关闭.. 我认为）。显然这不是完整的生产版本，security/hardening 很快就会出现。您可以看到我尝试为 Strapi public 上传创建代理，但最终失败了，只是最终使用了本地主机上的图像。

如果有人想看看一些调试工具：tinyurl。com/erzbh9m

此外，我对任何提出更好实践建议的人持开放态度，实际上非常感谢，因为哦，伙计，自从 webdev 以来已经有很多年了，情况发生了很大变化。

Answer 1

感谢@Michal Levý 指出 none 的图像是在桌面浏览器上为他加载的。

我觉得自己很蠢。

修复了 Nginx 反向代理配置的一些问题，一些中间件配置的问题，并将 ENV 设置为生产环境，并在某些地方修复了问题。真让人头疼。

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?

vue.js

vue-component

vuejs2

nuxt.js