一、問題描述

某天在開發(fā)需求時發(fā)現(xiàn)，業(yè)務頁面上報告了一個Script error。

由于vconsole看不到詳細報錯信息，于是在chrome上打開，具體報錯信息如下：

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild 

看起來是vue2.6.12包里報了一個錯誤，但從報錯提供的信息看不出來那行代碼引發(fā)的報錯。

二、解決過程

1、google：

解決問題的第一步往往是先看看“別人咋解決的”：把錯誤信息ctrl+c ctrl+v到瀏覽器里google一下先。

stackoverflow里看到的第一個解決方案是通過添加client-only標簽：

<template>
  <div id="container">
     <client-only>
        <Components>
     </client-only>
  <div>
</template>

在項目里也照著這個方法在App.vue里添加client-only標簽，重試后發(fā)現(xiàn)沒有效果，依然報錯。

也有說法說是由于標簽的關閉寫法導致的Hydration errors。

于是我搜索了下項目代碼，發(fā)現(xiàn)確實有幾處標簽是使用類似 <span class="split" /> 寫法進行關閉的。抱著嘗試的心理，我把這些寫法都改成了<span class="split"></span>。

然而重試后依然沒有解決這個報錯。

2、斷點調試：

既然網(wǎng)上的方法沒有效果，那只能打斷點看看是否能找到報錯的具體位置。

從錯誤報告點擊進詳情，可以看到是vue.min.js文件的appendChild拋出的錯誤。

在這里打一個斷點，并運行：

第一次經過此處：e是一個div，t是一個#comment的node節(jié)點，此時還沒有拋出錯誤。

第二次經過此處：e是一個div，t是一個text元素，此時還沒有拋出錯誤。

第三次經過此處：e是#comment的node節(jié)點，t是一個按鈕的div元素，此處拋出了對應的錯誤。

也就是在第三次運行appendChild時，由于e此時是一個node節(jié)點，不支持appendChild方法，于是vue拋出了Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.錯誤。

在項目里搜索comment，發(fā)現(xiàn)并沒有找到相應的代碼。于是從第三次appendChild的t參數(shù)入手。

可以看出來這是一個按鈕元素，并且按鈕文字內容是“我知道了”。在項目里搜索“我知道了”，可以找到兩處符合條件的元素。根據(jù)此時的頁面位置可以排除captcha組件，所以鎖定了verifyResult組件里的“我知道了”按鈕。

這處按鈕的html代碼如下：

<q-button
  v-if="resultInfo.showBtn"
  type="primary"
  @click="resultInfo.callback"
>
  {{ resultInfo.btnText }}
</q-button>

先把這部分內容直接注釋掉看看。 發(fā)現(xiàn)這個報錯確實不見了?？梢源_認，這個按鈕就是報錯的源頭。

3、定位：

那這個按鈕到底有啥問題呢？看起來就是一個平平無奇的確認按鈕呀。

從剛剛打斷點的時候可以看到，此時按鈕的text正常取到了"我知道了"文案，且報錯信息是在進行appendChild，也就是添加元素的動作時。而這個按鈕里用到了v-if，合理懷疑是這個v-if引起的。于是嘗試把v-if去掉或改成一個常量，發(fā)現(xiàn)頁面也不會報錯。

所以可以確定，這里的報錯是由于v-if的參數(shù)引起的。

這里v-if的參數(shù)是：resultInfo.showBtn

這里resultInfo是一個計算參數(shù)：

showBtn是通過另一個計算參數(shù)：isMobile來控制的。

看來問題就在isMobile上。

通過打印isMobile發(fā)現(xiàn)，在node時由于沒有window，所以isMobile=false，而頁面渲染時isMobile=true。

所以這里isMobile有一個從false -> true的變化。

所以這里按鈕元素經歷了從無到有的過程，在appendChild的時候node節(jié)點就拋出了錯誤。

4、解決

這里解決方案的主要就是去掉這個從無到有的過程，或者把這個變化后移。

• 去掉這個從無到有的過程：把v-if改成v-show。
• 把這個變化后移：isMobile不使用計算參數(shù)，在默認初始化為false，在created時再進行賦值。

created() {
    this.isMobile = browser.isMobile();
}

兩種方法都可以解決，我這里使用了第一種解決方案，報錯不再出現(xiàn)，且頁面按鈕可以正常顯示~

以上就是vue報錯Failed to execute 'appendChild' on 'Node'解決的詳細內容，更多關于vue 報錯解決的資料請關注腳本之家其它相關文章！

最新評論