带有WebStorm的Vue.js TypeScript项目的Debbuger不'；不要在断点处停下来

我用带有排版脚本设置的WebStorm创建了一个新项目。然后，调试器断点不起作用

我的设置 版本

• 节点12.10
• vue/cli 3.11.0

项目设置

巴别塔

打字稿

路由器

CSS预处理器

单元测试

构建设置

类样式语法=>Yes

用户Babel和Typescript=>Yes

使用historymode=>否

Css预处理器：Sass/Scss dart Sass

代码 调试点位于控制台.log（“已启动”）

从“Vue属性装饰器”导入{Component，Vue}；
从“./components/HelloWorld.vue”导入HelloWorld；
console.log（“satarted”）
@组成部分({
组成部分：{
HelloWorld，
},
})
导出默认类应用程序扩展Vue{}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

WebStorm的调试设置：

然后单击debug按钮，但它不会在断点处停止

---

package.json、tsconfig.json和其他文件是默认设置。
如果程序没有在断点处停止，通常意味着程序没有执行断点所在的代码。或者你看错地方了。在前端应用程序中，按f12键可以在浏览器中查看控制台。我还建议使用Vue Devtools扩展，它非常有用
 如果程序没有在断点处停止，通常意味着程序没有执行断点所在的代码。或者你看错地方了。在前端应用程序中，按f12键可以在浏览器中查看控制台。我还建议使用Vue Devtools扩展，它非常有用
 您应该通过运行（非调试）npm-serve运行配置来启动应用程序，然后选择JavaScript-debug配置并按debug

请参阅，调试应用程序部分
您应该通过运行（非调试）npm serve运行配置来启动应用程序，然后选择JavaScript调试配置并按调试

请参阅调试应用程序部分
您调试了什么配置-npm或javascript调试？前者应仅用于启动应用程序，您需要选择后者，然后按Debug将调试器连接到浏览器页面。我正在使用npm Debug。我将尝试连接到brwoser页面。您调试了什么配置-npm或javascript调试？前者应仅用于启动应用程序，您需要选择后者，然后按Debug将调试器连接到浏览器页面。我正在使用npm Debug。我将尝试连接到brwoser页面。
<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>