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

前言

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

Nuxt.js 的運作

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

• Node.js
• Webpack

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

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

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

window or document undefined(window is not defined)

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

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

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 有兩個環境就好，後面介紹時會再說明差異。