具有Webstorm的Vue.js打字稿项目的调试器不会在断点处停止

Question

我使用带有设置脚本设置的Webstorm创建了新项目。然后，调试器断点不起作用。

我的设置

版本

nodeinterpreter节点12.10vue / cli 3.11.0

项目设置

1. 通天塔
2. 打字稿
3. 路由器
4. CSS预处理器
5. 单元测试

构建设置

1. 类样式语法=>是
2. 用户Babel与打字稿一起=>是
3. 使用历史模式=>否
4. Css预处理程序：Sass / Scss dart-sass

代码

调试点在console.log（“ started”）]上>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

console.log("satarted")

@Component({
  components: {
    HelloWorld,
},
})
export default class App extends Vue {}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Webstorm的调试设置

然后单击调试按钮，但不要在断点处停止。

package.json, tsconfig.json和其他文件是默认设置。

我使用带有设置脚本设置的Webstorm创建了新项目。然后，调试器断点不起作用。我的设置版本节点解释器节点12.10 vue / cli 3.11.0项目设置Babel ...

Answer 1

如果您的程序没有在断点处停止，通常意味着您的程序不执行断点所在的代码。或者您在寻找错误的位置。在前端应用程序中，可以通过按f12在浏览器中查看控制台。我还建议使用Vue Devtools扩展，它非常有用。