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'); |
你會得到一個錯誤訊息
要解決這個方式就是要讓 Nuxt 在打包的時候,不要將 owl.carousel 打包進去 server,那麼解決方式很簡單只需要這樣就可以解決了
1 | if (process.client) { |
意思簡單來講就是只在 client 下引入這個套件
結尾
如果是引入 bootstrap 的話也是一樣,但是網路上有兩種做法
1 | if (process.browser) { |
另一種則是
1 | if (process.client) { |
以上這兩種我都有測試過都可以正常運作,但是依照如果是比較正式一點的話,後者應該會比較適合,畢竟官方文件有寫到這個方式