vConsole 是騰訊公司維護的一個開源項目，用來讓前端工程師進行移動端調(diào)試，非常好用。但是官方只提供了一般情況下的用法，并沒有 Nuxt.js 項目中的用法，所以特此記錄一下引入方式，并且區(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境，只在開發(fā)環(huán)境引入。
首先，通過 npm install vconsole 或 yarn add vconsole 安裝 vconsole，安裝完成后，項目的 package.json 文件的 dependencies 中就會加入 vconsole。
然后，在項目的 plugins 文件夾下新建 vconsole.js 文件（plugins 文件夾用來存放第三方插件，比如 element-ui，vconsole 等），文件內(nèi)容如下：
import VConsole from 'vconsole'
const vConsole = process.env.NODE_ENV === 'development' ? new VConsole() : ''
export default vConsole
可以看到，這里通過全局變量 process.env.NODE_ENV 來判斷了當前環(huán)境，如果是開發(fā)環(huán)境 development，那么就正常創(chuàng)建 VConsole 的實例，然后引入，如果是其他環(huán)境，就不創(chuàng)建實例。這個條件根據(jù)項目需要由你自己決定。
最后，在 nuxt.config.js 文件的 plugins 變量中加入 vconsole 模塊：
module.exports = {
plugins: [{src:"~/plugins/vconsole", ssr: false}]
}
這樣，就成功引入 vconsole 了，在開發(fā)環(huán)境下運行，就能夠看到 vconsole 的面板，而在生產(chǎn)環(huán)境下，就不會出現(xiàn) vconsole 的面板。最后，通過公眾號“極課助手”去購買“極客時間”所有課程，可以獲得高額返現(xiàn)，最高可返 51 元，如果想了解更多技術(shù)知識，可以關(guān)注“極課助手”公眾號。
