Nuxt2 プロジェクトでのデバッグに vConsole を使用する方法

はじめに:
vConsole は、フロントエンドエンジニアがモバイル側でデバッグするための便利なツールです。公式では通常の使い方しか載っていないので、Nuxt.jsプロジェクトでの使い方はないようですが、ここに記録しておくと本番環境と開発環境の区別がつきます。

1. インストール

まず、vconsole を渡すnpm install vconsoleかyarn add vconsoleインストールします。インストールが完了すると、vconsole がプロジェクトの package.json ファイルの依存関係に追加されます。

npm install vconsole

ここに画像の説明を挿入

2. vconsole.js ファイルを追加します

次に、プロジェクトpluginsフォルダーvconsole.jsの下に新しいファイル (plugins フォルダー。element-ui、vconsole などのサードパーティプラグインの保存に使用されます) を作成します。ファイルの内容は次のとおりです。(ps: vue プロジェクト内 (通常は main.js に追加されます。これは vue プロジェクトの構造と同じではありません)

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

ここに画像の説明を挿入
vconsole.js ファイルでは、グローバル変数 process.env.NODE_ENV によって現在の環境を判断できます。開発環境の場合は通常通りVConsoleのインスタンスを作成してインポートしますが、それ以外の環境の場合はインスタンスは作成されません。この条件はプロジェクト自体によって決定できます。

3. vconsole モジュールを追加します

最後に、nuxt.config.jsファイルの plugins 変数に次を追加しますvconsole模块。

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

ここに画像の説明を挿入
これで vconsole が正常に導入され、選択した環境で実行すると、vconsole のパネルが表示されます。

参考ブログ：

Nuxt.js プロジェクトで vConsole を使用する方法http://www.javashuo.com/article/p-krohyfgo-dp.html