如何在VS代码中调试vue js应用程序？

我使用vue init webpack my-test3创建了新的vue.js应用程序。如何在VS代码中调试vue js应用程序？

在VS代码（V1.7.1），我试图调试该应用程序和默认launch.json已计划设置为：

"configurations": [ 
    { 
     "type": "node", 
     "request": "launch", 
     "name": "Launch Program", 
     "program": "${workspaceRoot}/app.js", 
     "cwd": "${workspaceRoot}" 
    },

但app.js不存在。我是否需要创建app.js，如果是这样的内容？如果不是，我在哪里指向program？还是我需要做一些完全不同的事情？

UPDATE 1

好了，我试图改变program指向/src/main.js。现在正在抛出ES 2015错误。

(function (exports, require, module, __filename, __dirname) { import 
Vue from 'vue' 
                   ^^^^^^ SyntaxError: Unexpected token import 
    at Object.exports.runInThisContext (vm.js:76:16) 
    at Module._compile (module.js:542:28) 
    at Object.Module._extensions..js (module.js:579:10) 
    at Module.load (module.js:487:32) 
    at tryModuleLoad (module.js:446:12) 
    at Function.Module._load (module.js:438:3) 
    at Timeout.Module.runMain [as _onTimeout] (module.js:604:10) 
    at ontimeout (timers.js:365:14) 
    at tryOnTimeout (timers.js:237:5) 
    at Timer.listOnTimeout (timers.js:207:5)

我期待到babelrc设置。此外，如果有帮助，系统运行：

node  v6.9.1 
npm  v3.10.8 
babelrc v6.18.0

来源

2016-11-08 CrnaStena

所以周围的一些障碍之后，我计算过，起点调试已启动服务器，因此program设置为/build/dev-server.js，在launch.json：

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "node", 
      "request": "launch", 
      "name": "Launch Program", 
      "program": "${workspaceRoot}/build/dev-server.js", 
      "cwd": "${workspaceRoot}" 
     }, 
     { 
      "type": "node", 
      "request": "attach", 
      "name": "Attach to Process", 
      "port": 5858 
     } 
    ] 
}

现在，您可以通过按F5或调试侧栏（Ctrl-Shift-D），然后选择“启动程序”并单击绿色的开始按钮来调试vue.js应用程序。您可以使用Ctrl-Shift-Y切换调试控制台窗口。

对于后人，launch.json是在您第一次尝试在您的应用程序的.vscode文件夹中进行调试时创建的。

来源

2016-11-08 16:08:42 CrnaStena

我可以问你另一部分的配置吗？因为如果是这样的话，你会改变我的调试生活:) –

我刚刚走出去，明天我会用完整的launch.json更新。 – CrnaStena

这将是非常感激，也知道他的你的开发工作流程。像： - F5在VSCode - 这是它或 - NPM运行开发 - vsCode F5 - 等等.... –

如何在VS代码中调试vue js应用程序？

回答

相关问题