javascript - Gulp webpack 生产模式导致 iOS 中的 vue 更新出现问题

Question

我正在创建一个产品集合的页面。当用户点击其中一个产品的图像时，该产品的详细版本会滑入。

我正在使用 vue 来更新图像的 src 以及产品 ID，具体取决于单击的产品。我发现有时——仅在 iOS 手机上，并且仅当我在生产模式下运行 webpack 时——HTML 不会使用新的图像src属性或产品 ID 重绘。控制台日志确实显示它正在更新我的变量，但 vue 没有触发重绘。

我的产品网格是这样设置的：

<div v-for="product in products.items" class="column">
    <div v-on:click="open(product)" :class="[{'soldout' : (product.inventoryCount == 0)},'image']">
        <img :src="product.images[0].src" :alt="product.images[0].alt">
    </div>
</div>

我的详细部分如下所示：

<div v-for="image in productImages" :key="image.src" class="slide">
    <img :src="image.src" :alt="image.alt">
    <button class="button" v-on:click="addToCart" :data-id="productID">Add to Cart</button>
</div>

我更新 vue 变量的函数如下所示：

open(product) {
    this.productImages = product.images;
    this.productID = product.variantId;
}

我运行 webpack 的 gulp 任务如下所示：

.pipe(webpack({
    mode: `${mode}`,
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}))

而且我使用不同的 gulp 任务在开发或生产模式之间切换。

据我所知，它在我处于开发模式时没有问题，但当我切换到生产模式时，我就会注意到问题。如果我执行控制台日志，this.productImages或者this.productID它们都使用正确的信息进行更新，但两者都<img :src="image.src" :alt="image.alt">没有<button class="button" v-on:click="addToCart" :data-id="productID">Add to Cart</button>更新。

奇怪的是，它似乎只发生在 iPhone 上，而且它完全是随机的，取决于刷新。有时我需要刷新几页才能看到它中断，有时它非常一致。

它似乎也因手机而异。我的同事手机几乎每次刷新都会出现问题，但我的手机需要好几次才能看到它。有没有其他人处理过这样的问题或知道可能是什么原因造成的？

标签： javascriptvue.jswebpackgulpbabeljs