Vconsole の使用とさまざまな環境での使用

1. はじめに:

プロジェクトの開発中、印刷ログはPC側ではF12で見ることができますが、モバイル側では見ることができません、もちろんアラートからポップアップ表示することもできますが、この方法は非常に不便です、そこでVconsoleが誕生しました。Vconsoleはモバイル端末のフロントエンドに特化したデバッグパネルですが、もちろんPC側でも使用でき、PC側でF12を使うのと同じくらい便利です。

2. アプリケーションシナリオ:

1. モバイルプロジェクト
2. F12 を使用できないエンタープライズ WeChat およびその他のプラットフォーム

3. 使用方法:

1. Vconsole ツールをインストールします

npm install vconsole

2. main.jsへの導入と利用

import Vconsole from 'vconsole';
const vConsole = new Vconsole()
Vue.use(vConsole)

4. Vconsole をローカルおよびテスト環境で使用し、本番環境で Vconsole を閉じるにはどうすればよいですか?

ローカル環境、テスト環境、またはグレースケール環境で Vconsole を使用すると開発が容易になりますが、運用環境に展開する場合は、特別に開発されたデバッグ ツールをユーザーに見せたくありません。現在の環境が本番環境の場合は、Vconsole を非表示にします。

if (window.location.host == '测试环境域名') {
    const vConsole = new Vconsole()
    Vue.use(vConsole)
}
//或者
if (process.env.VUE_APP_SERVER_ENV == 'dev' || process.env.VUE_APP_SERVER_ENV == 'sit') {//使用环境变量进行判断
    const vConsole = new Vconsole()
    Vue.use(vConsole)
}