Vuejs - VSCODE にブレークポイントが設定されていない

Question

vscode を使用して vuejs をデバッグしようとしています。多くのチュートリアル/回答を試しましたが、動作させることができません。

そこで、ここで質問することにしました。もしかしたら、今それを機能させるための正しい方法があるかもしれません。

デバッグしたいプロジェクトと同じプロジェクトを作成したので、ここに印刷物を投稿できます。

プロジェクトの構造は次のとおりです:

これはバインドされていないブレークポイントです:

Chrome の [ソース] タブは次のようになります:

Chrome ソース タブの詳細:

vue.config.js：

リーリー

launch.json：

リーリー

タスク.json：

リーリー

パッケージ.json：

リーリー

更新

@A.D から、キーワードを使ってみるかどうか尋ねられました

リーリー

結果は次のとおりです。 追伸: コード内にデバッガーを書き始めたくないのですが...

しかし、デバッガー ファイルが次を指していることがわかります:

リーリー

しかし、コンポーネント src は実際には

にあります。 リーリー

ブレークポイントに境界がないのはなぜですか?

Answer 1

webRoot パラメータを変更して、コンテンツをドキュメントに保持してみてください。${workspaceFolder} の後に src を含める必要があります。

リーリー

更新: いくつか調べた結果、この 質問 を見つけました。 使用しているバージョンに変更があります。 彼らはコンパイラを変更し、これがデバッガの動作方法に影響を与えました。

このバージョンでは "2.6.11" を使用できます。

注: この変更は後続のリリースに影響します。

Answer 2

vue 2.6.11 以降のバージョンの webpack にはいくつかの問題があるようです

Git セントラル テーマ

Redditのトピック

@Tonielton Mota との議論の後、package.json と package-lock.json からプロパティ名を完全に削除すると機能することに気付きました。

実行中のファイルは次のとおりです:

launch.json

リーリー

パッケージ.json

リーリー