VS Code - 在 Laravel 项目中调试 VUE 组件 - 未验证断点

Question

我正在尝试使用 VS Code 在 Laravel 5.5 项目中调试 VUE 组件。

安装了最新版本的 VS Code。
已安装 Chrome 4.2.0 调试器。
所有 Chrome 进程都被杀死。

.vscode 文件夹中的 launch.json 具有以下代码：

"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8000",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "runtimeArgs": [
        "--remote-debugging-port=9222"
        ]
    },  
]

我从 CMD 开始这个项目是这样的：

? php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

我在 Vue 组件中设置了一个断点并开始调试 （见图）

结果，在Chrome中打开了项目页面，但断点不起作用。
它显示为灰色并显示以下消息：

Unverified breakpoint, Breakpoint ignored because generated code not found
(source map problem?)

我在项目文件夹中找到了 4 个名为“webpack.mix.js”的文件。我添加了“.sourceMaps();” 像这样对他们每个人：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

之后，我通过以下方式重建项目：

npm run dev

但是我在CSS文件夹中没有找到任何地图文件，问题仍然存在。

Answer 1

这是对我有用的配置，它允许我直接在 VSCode 中为.vue和.js文件设置断点：

VSCode 的launch.json：

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/public",
        "sourceMapPathOverrides": {
            "webpack:///resources/assets/js/*.vue": "${workspaceFolder}/resources/assets/js/*.vue",
            "webpack:///./resources/assets/js/*.js": "${workspaceFolder}/resources/assets/js/*.js",
            "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
        }
    }]
}

webpack.mix.js：

let mix = require('laravel-mix');

mix
  .js('resources/assets/js/app.js', 'public/js')
  .sourceMaps(false, 'source-map')
  .sass('resources/assets/sass/app.scss', 'public/css');