如何在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 元，若是想了解更多技術知識，能夠關注「極課助手」公衆號。