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

發表於 2019-08-21 更新於 2020-01-20 分類於 Vue

最近開發 Nuxt.js 在引入套件的時候發生 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');
}

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