Nuxt.js打包後報錯DOMException: Failed to execute appendChild on Node

報錯問題

Nuxt.js打包後報錯

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

開發環境下報錯

Mismatching childNodes vs. VNodes:

解決

1、template中可以限制只在客戶端渲染

// version >= 2.9.0
<client-only></client-only>

// version < 2.9.0
<no-ssr></no-ssr>

參考

1. Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.
2. https://nuxtjs.org/api/components-client-only/

2、script中可以使用客戶端、服務端判斷

if(process.client){
    console.log('client')
}

if(process.server){
    console.log('server')
}

參考
Window 或 Document 對象未定義