如何在Nuxt.js項目中使用vConsole

vConsole 是騰訊公司維護的一個開源項目，用來讓前端工程師進行移動端調試，非常好用。但是官方隻提供了一般情況下的用法，并沒有 Nuxt.js 項目中的用法，是以特此記錄一下引入方式，并且區分生産環境和開發環境，隻在開發環境引入。

首先，通過

npm install vconsole

或

yarn add vconsole

安裝 vconsole，安裝完成後，項目的 package.json 檔案的 dependencies 中就會加入 vconsole。

然後，在項目的 plugins 檔案夾下建立 vconsole.js 檔案（plugins 檔案夾用來存放第三方插件，比如 element-ui，vconsole 等），檔案内容如下：

import VConsole from 'vconsole'
const vConsole = process.env.NODE_ENV === 'development' ? new VConsole() : ''
export default vConsole
           

可以看到，這裡通過全局變量 process.env.NODE_ENV 來判斷了目前環境，如果是開發環境 development，那麼就正常建立 VConsole 的執行個體，然後引入，如果是其他環境，就不建立執行個體。這個條件根據項目需要由你自己決定。

最後，在 nuxt.config.js 檔案的 plugins 變量中加入 vconsole 子產品：

module.exports = {
	plugins: [{src:"~/plugins/vconsole", ssr: false}]
}
           

這樣，就成功引入 vconsole 了，在開發環境下運作，就能夠看到 vconsole 的面闆，而在生産環境下，就不會出現 vconsole 的面闆。最後，通過公衆号“極課助手”去購買“極客時間”所有課程，可以獲得高額返現，最高可返 51 元，如果想了解更多技術知識，可以關注“極課助手”公衆号。