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

Javascript Gulp webpack生产模式导致iOS中vue更新出现问题,javascript,vue.js,webpack,gulp,babeljs,Javascript,Vue.js,Webpack,Gulp,Babeljs,我正在创建一个产品集合页面。当用户单击其中一个产品的图像时,会滑入该产品的详细版本 我正在使用vue更新图像的src以及产品ID,具体取决于单击的产品。我发现有时候——只有在iOS手机上,并且只有在生产模式下运行webpack时——HTML没有使用新的imagesrc属性或产品ID重新绘制。控制台日志确实显示它正在更新我的变量,但vue没有触发重新绘制 我的产品网格设置如下: <div v-for="product in products.items" class="column">

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

我正在使用vue更新图像的src以及产品ID,具体取决于单击的产品。我发现有时候——只有在iOS手机上,并且只有在生产模式下运行webpack时——HTML没有使用新的image
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>
open(product) {
    this.productImages = product.images;
    this.productID = product.variantId;
}
.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()
    ]
}))
我运行Web包的吞咽任务如下所示:

<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>
open(product) {
    this.productImages = product.images;
    this.productID = product.variantId;
}
.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()
    ]
}))
我使用不同的吞咽任务在开发或生产模式之间切换

据我所知,它在我处于开发模式时工作没有问题,但一旦我切换到生产模式,我就会注意到这个问题。如果我对
this.productImages
this.productID
执行控制台日志,它们都会使用正确的信息进行更新,但是
添加到购物车
都不会更新

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

这似乎也因手机而异。我的同事的手机几乎每次刷新都会出现问题,但我的手机在我看到它之前会出现一些问题。有没有其他人处理过这样的问题,或者知道是什么原因造成的