我遇到了一个奇怪的问题，在移动设备上的页面渲染工作，但当WiFi断开时，图像不再加载。我对此感到困惑，尽管我承认我对SSR/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
})}
下一个配置(留在我认为可能相关的部分):
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现在是关闭的)。我认为)。显然，这不是一个完整的生产构建，安全/加固将很快到来。您可以看到我尝试为Strapi公共上传创建代理，但最终失败了，只是最终使用了本地主机上的图像。
如果有人想看看一些调试工具:tinyurl.com/erzbh9m
同时，我是开放的，实际上非常感激，任何人谁建议更好的做法，因为天哪，这是多年以来的web开发和景观已经发生了很大的变化。
感谢@Michal Levý指出，在桌面浏览器上没有一个图像是为他加载的。
我觉得自己很笨。
修复了Nginx反向代理配置的一些问题，这里和那里的一些中间件配置，并将ENV设置为生产，并在某个地方修复了问题。真让人头疼。