最近使用 Vue.js 進(jìn)行項(xiàng)目開(kāi)發(fā)時(shí)，遇到了一個(gè)問(wèn)題，就是在使用 Vue 懶加載（Lazyload）時(shí)，會(huì)報(bào)錯(cuò)。

下面是出現(xiàn)問(wèn)題的代碼：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
preLoad: 1.3,
error: './static/error.png',
loading: './static/loading.gif',
attempt: 1
});

在調(diào)用 Vue.use() 方法時(shí)，會(huì)報(bào)錯(cuò)，錯(cuò)誤信息如下：

TypeError: Cannot add property preLoad, object is not extensible

經(jīng)過(guò)分析，問(wèn)題出在 VueLazyload 插件版本上。我們的項(xiàng)目中使用的是 vue-lazyload 的 1.2.6 版本，而在這個(gè)版本中，preLoad 等屬性并未定義，因此會(huì)出現(xiàn)報(bào)錯(cuò)。

解決方案是升級(jí)插件版本。我們可以選擇升級(jí)到 1.3.0 版本，這個(gè)版本中已經(jīng)定義了 preLoad、error、loading 等屬性。

修改后的代碼如下：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
loading: './static/loading.gif',
attempt: 1
lazyComponent: true,
observer: true,
observerOptions: {
rootMargin: '30px',
threshold: 0.1
}
});

這樣就解決了 Vue 懶加載報(bào)錯(cuò)的問(wèn)題。