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 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

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