次の問題があります。 Vue.jsプロジェクトをVS CodeとChromeでデバッグしたい。だから私はウェブサイトの公式ガイド Guide に従いますが、うまくいきません。問題は、常にエラーが発生することです。
unverified breakpoint
何がいけないのですか?
これは私のvue.config.js
です
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
これは私のデバッグの手間です:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:/src/*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://????app/*": "${webRoot}/*"
}
}
]
}
そして、これは私のpackage.jsonです
"name": "test-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serve
を試してみると、エラーメッセージunverified breakpoint
が表示され、ブレークポイントに到達しません。
Vue-cli 3を使用してプロジェクトを生成します。
誰かが私を助けてくれますか?
更新
パスに問題がある可能性があります。 VS Codeのデバッガコンソールで.scripts
を実行すると、次のようなパスが取得されるため
(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts)
ただし、webpack:
というフォルダはありません。しかし、なぜ彼はフォルダがあると考えているのか、私にはわかりません。彼はこれをすべてのファイルで作成します。
そして、私のtsconfig.js
にはすでに"sourceMap": true
があります。
更新2
チェックボックスAll Exceptions
をオンにすると、VSコードでアプリ内のすべての例外が表示されます(例外はキャッチされます)。しかし、私のブレークポイントはまだ機能しません。
更新3
私のプロジェクトはこのように見えます
C:\Users\User\Desktop\Vue\route-app
|
-----.vscode
|
-----launch.json
|
-----node_modules
|
----- modules etc.
|
-----public
|
----- index.html
|
----- manifest.json
|
----- favicon.ico
|
-----src
|
----- components
|
----- all my components.vue files
|
----- views
|
----- all my views.vue files (this files are for routing)
|
----- App.vue
|
----- main.ts
|
----- registerServiceWorker.ts
|
----- router.ts
|
----- shims-tsx.d.ts
|
----- shims-vue.d.ts
|
----- store.ts
|
-----.postcssrc.js
|
-----babel.config.js
|
-----package-lock.json
|
-----package.json
|
-----tsconfig.json
|
-----tslint.json
|
-----vue.config.js
このデバッグアダプターは、Chromeデバッグアダプターと同じ構文を使用していません。URLとパスの最後にある*を削除してください:
"webpack:///src/": "${webRoot}/"
構成vue.config.js
(存在しない場合は作成してください)
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
};
構成babel.config.js
module.exports = {
"env":{
"development":{
"sourceMaps":true,
"retainLines":true,
}
},
presets: [
'@vue/app'
]
}
構成launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
},
]
}
デバッグできます.vue
および.js
ファイルは通常、上記の構成を参照した後(vue-cli3 + vscode)
私にとっては、webrootフォルダーが正しく設定されていませんでした。
My vue files browser is set to:
D:\Workspace
プロジェクトはそのフォルダにあります
D:\Workspace\vue_project1
Launch.jsonのwebroot設定を次のように変更する必要がありました。
"webRoot": "${workspaceFolder}/vue_project1"