在Docker的服务器上调试nuxtjs .vue文件

Question

我目前有一个nuxt应用程序设置为一个通用应用程序，在其中使用Docker托管。我已经完成了几乎所有的工作，调试器会在遍历中间件和api调用时附加并找到局部变量，但是在调试文件中的asyncData方法时，.vue我看不到任何局部变量，并且断点不断移至该.catch行：

在当前上下文中，我还得到了一堆其他随机的东西，在这种情况下为“模块”？

我也将此行添加到我的nuxt.config.js文件中，以确保它使用正确的源映射：

     /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      console.log(`IsClient: ${ctx.isClient}`);
      console.log(`isDev: ${ctx.isDev}`);
      if (ctx.isDev) { 
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  }

这也是我的.vscode配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "remoteRoot": "/usr/share/nginx/app",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}/app",
            "protocol": "inspector",
            "restart": true,
            "sourceMaps": true
        }
    ]
}

另外，这是我用来启动容器的命令：

 node --inspect=0.0.0.0:9229 \
            ./node_modules/.bin/nuxt \
            & nginx -g "daemon off;" \

自从编译以来，我尝试了很多不同的方法，包括使用babel-register并从babel-node启动它，但是这些方法都无效。

我在这里想念什么吗？.vue创建通用应用程序时，我们可以不调试服务器上的文件吗？

更新

我改用Webstorm，无论出于何种原因，调试都可以正常进行。我想那是使用IDE和文本编辑器之间的区别。

Answer 1

attach当你的 nuxt 应用程序已经启动时vs 代码检查器。
要查看服务器端发生的情况，vs code 必须启动您的 nuxt 应用程序。
将此脚本添加到您的 package.json 中：

...
scripts: {
   "dev": "nuxt,
   "dev-debug": "node --inspect node_modules/.bin/nuxt",
   ...
}
...

在 .vscode 配置或 .vscode/launch.json 中：

"configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Launch nuxt",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run",
        "dev-debug"
    ],
    "port": 9229
},
...

最后，当我们在开发模式下运行时，扩展构建nuxt.config.js以添加源映射，并确保客户端和服务器的类型正确。

build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
}

它在本地主机上对我有用，但我不确定它是否可以与远程根一起使用......

而且，这并不是一个完美的解决方案。我有时看到断点从不同的行跳转。我认为这是因为 VS Code 无法处理源代码和内联源代码中的相同行。

替代方式：

要仅调试单个文件组件 ( .vue) 的 javascript，可以将 javascript 部分提取到外部.js文件中，然后使用<script src="./path-to-js"></script>.