在將項目從 vue2 轉(zhuǎn)為 vue3 后，出現(xiàn)了一些超預(yù)期的錯誤。比如如下這個：

image.png

這報錯看上去直接上升到了 vue 源碼的高度，有點嚇人。然后去網(wǎng)絡(luò)上搜索了關(guān)鍵字

TypeError: Cannot read properties of null (reading 'emitsOptions')

看到 https://blog.csdn.net/weixin_42151366/article/details/124829423 這篇文章，說是有對象類型錯誤，于是就往這方面去查。

結(jié)果剛巧在生產(chǎn)環(huán)境的 vconsole 里面也看到報錯。但是它的報錯更加明確，指向了一個函數(shù)：

const value = this.footer[itemIndex].value

調(diào)試后發(fā)現(xiàn)這個 this.footer[itemIndex] 會出現(xiàn) undefined 的情況。最終寫個 if else 解決了。

感覺 vue3+vite 在開發(fā)的時候定位問題有點麻煩，居然不顯示出問題的位置。所幸是解決了。

解決方案

可以通過 vue 的 errorCaptured 來定位問題所在位置：

export default {
  name: 'app',
  errorCaptured(message) {
    console.error('vue component error', message)
  },
}

錯誤信息

如此就可以找到問題所在了。