Как отладить vue.js SFC (компонент с одним файлом) в vscode, используя TypeScript и webpack 4?

Question

Для , например , кажется, что все работает с установленным расширением Chrome Debugger.

Когда я пытался использовать:

<script lang="ts">

карта источника, кажется, просто испортилась.Следуя инструкциям здесь , я могу отлаживать в Chrome, но больше не в vscode.

Answer 1

Я использовал шаблон vue-cli версии 3 с TypeScript в Single-File-Components Vue.js, а не в руководстве, которое вы связали, но у меня была похожая проблема.

vue-cli v.3 шаблон заканчивает тем, что выводит исходные карты компонентов TypeScript в «.»папка (но все в webpack: //), в то время как исходные карты компонентов JavaScript оказываются в папке 'src'.Это привело к тому, что sourceMapPaths по умолчанию работают для SFC JavaScript, но не для SFC TypeScript.Поэтому я мог устанавливать точки останова непосредственно в отладчике Chrome, но не в исходных файлах VSCode для SFC TypeScript.

Мое решение состояло в том, чтобы исправить сопоставление с помощью конфигурации sourceMapPathOverrides (альтернативно, это можно исправить, изменивпроцесс сборки, но это выглядело как простой подход).

В .vscode / launch.json вы можете установить соответствующие отображения.Конфигурация, которую я использовал, в конечном итоге выглядела примерно так (но вам, возможно, придется настроить ее в зависимости от ваших точных настроек):

{
  "type": "chrome",
  "request": "launch",
  "name": "ChromeDebug",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}",
  "breakOnLoad": true,
  "sourceMaps": true,
  "disableNetworkCache": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*",
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/src/*"
  }
}

(последняя запись в sourceMapPathOverrides, вероятно, избыточна. Ваша ссылка, похоже, использует'.: //' корневой путь вывода, а не мой 'webpack: //' root, и вам также может понадобиться настроить путь webRoot, где бы ни находились ваши исходные файлы. Не забудьте также изменить URL / порт, еслиэто отличается от моего примера.)

...

И следующее, вероятно, не связано с проблемой OP, но может быть полезно для кого-то с подобной проблемой:

При использовании TypeScript убедитесь, что у вас есть «sourceMap»: true в вашем tsconfig.json.

Если вы используете vue-cli v.3, вам также может понадобиться добавить файл vue.config.js в проектroot, например, чтобы изменить значение devtool по умолчанию:

module.exports = { configureWebpack: { devtool: "source-map" } };