时间戳

首页 > 解决方案 > 在 Docker 中调试服务器上的 nuxtjs .vue 文件

node.js - 在 Docker 中调试服务器上的 nuxtjs .vue 文件

问题描述

我目前有一个 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 和文本编辑器之间的区别。

标签： node.jsdockervue.jsvisual-studio-codenuxt.js

解决方案

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 代码无法处理源代码和内联源代码中的相同行。

替代方式：

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

推荐阅读