Nuxt.js 2.x 實戰手冊(4) - Nuxt.js 運作

發表於 2021-11-27 分類於 Nuxt

Google AD

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

Liker 讚賞

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

｜

接下來這一篇會簡單聊一下關於 Nuxt.js 的運作。

前言

接下來這一篇會簡單聊一下關於 Nuxt.js 的運作。

Nuxt.js 的運作

其實 Nuxt.js 的環境區分為兩個

Node.js
Webpack

因此你可以試著在終端機輸入 npm run dev，當你輸入完畢後你會看到終端機有以下訊息：

Nuxt.js

而 Client 所代表的就是 Webpack 反之 Server 就是 Node.js。

那麼為什麼要特別了解這一段呢？主要原因在於我們在開發時，時常會安裝許多第三方套件，如：axios、vue-axios、vue-cookies 等，而了解這一段的運作可以避免你發生一種很常見的錯誤，也就是…

window or document undefined(window is not defined)

Nuxt.js 在運作的時候，同時會個別運作兩種模式，因此若你安裝的套件剛剛好並不支援 Node.js 的環境的話，那麼就會出現剛剛所講的錯誤訊息

window is not defined

通常解法就是使用以下兩種寫法

1
2
3

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

1
2
3

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

那麼該如何避免這種狀況發生呢？基本上我個人認為這有點吃經驗法則，例如來講 Bootstrap 的東西一定是只會在 client 中使用，你不可能在 Node.js 中使用，而 axios 在 Node.js 環境上是有可能使用到，所以可以不用加上 process.client 語法，因此最簡單的辨別方式就是「運作看看」，再不然就是你必須閱讀程式碼知道該套件是否有使用到類似瀏覽器環境才會有的屬性，如：document、window。

那麼簡單知道 Nuxt.js 有兩個環境就好，後面介紹時會再說明差異。