Nuxt 出現 window or document undefined(window is not defined)

前言

最近開發 Nuxt.js 在引入套件的時候發生 window is not defined 的錯誤訊息,所以這一篇來記錄一下該如何解決

解決方式

由於 Nuxt 在打包的時候會將放在 plugins 一起打包進去 server,那麼就會導致某些外掛是不能正常運作(因為要取得 window),這邊舉例一個套件就很明顯,當你直接在 plugins 資料夾內新增一個 owlCarousel.js,並輸入以下內容

1
require('owl.carousel');

你會得到一個錯誤訊息

window is not defined

要解決這個方式就是要讓 Nuxt 在打包的時候,不要將 owl.carousel 打包進去 server,那麼解決方式很簡單只需要這樣就可以解決了

1
2
3
if (process.client) {
require('owl.carousel');
}

意思簡單來講就是只在 client 下引入這個套件

結尾

如果是引入 bootstrap 的話也是一樣,但是網路上有兩種做法

1
2
3
if (process.browser) {
require('bootstrap');
}

另一種則是

1
2
3
if (process.client) {
require('bootstrap');
}

以上這兩種我都有測試過都可以正常運作,但是依照如果是比較正式一點的話,後者應該會比較適合,畢竟官方文件有寫到這個方式

參考文獻

Window 或 Document 对象未定义?

nuxt.js + bootstrap

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ