フロントエンドとバックエンドを分離すると、フロントエンドブレークポイントのデバッグがより複雑になります。vueをchromeでデバッグするには、最初にDebugger for Chromeプラグインをvscodeにインストールしてから、デバッグ構成を追加して起動を変更する必要があります。 json構成ファイル; vue公式ウェブサイトの手順を参照できます：クロムでのvueのデバッグ
統合プロセス中に、デバッガーを使用して指定されたjsファイル行でデバッガー操作を実行するか、vue.config.jsファイルでdevtoolsを設定して、実行時にフロントエンドでソースを表示できます：webpack's devtools ; you vscodeで直接chromeを開くこともできますデバッグ操作を実行します。
// vue.config.js文件中设置devtools
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('source-map')
)1.Chrome用デバッガーをインストールします
次のように、vscodeの拡張プラグインボタンにインストールするか、chrome：debuggerにダウンロードした直後にインストールします。
2. launch.json構成ファイルを追加し、chromのデバッグ構成を変更します。ここで、urlは現在のプロジェクトのエントリURLです。
3.割り込みポイントで操作を中断すると、左上隅の再生により、クロムで実行されているプロジェクトのページがポップアップ表示されます。
