【桌面开发】Electron+vue框架+vs-code&vs-code调试环境搭建

lichong951

已于 2023-11-20 09:27:56 修改

阅读量2.2k

点赞数

文章标签： vue.js electron javascript 前端桌面开发

于 2022-09-23 16:16:12 首次发布

本文链接：https://blog.csdn.net/lichong951/article/details/127005873

版权

Electron+vue框架+vs-code&vs-code调试环境搭建
环境准备

vue
vsCode
electron-builder

运行

在这里插入图片描述

vue myproject
vue add electron-builder
npm run electron:serve

调试配置

tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "electron-debug",
        "type": "process",
        "command": "./node_modules/.bin/vue-cli-service",
        "windows": {
          "command": "./node_modules/.bin/vue-cli-service.cmd"
        },
        "isBackground": true,
        "args": ["electron:serve", "--debug"],
        "problemMatcher": {
          "owner": "custom",
          "pattern": {
            "regexp": ""
          },
          "background": {
            "beginsPattern": "Starting development server\\.\\.\\.",
            "endsPattern": "Not launching electron as debug argument was passed\\."
          }
        }
      }
    ]
  }

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Electron: Main",
        "type": "node",
        "request": "launch",
        "protocol": "inspector",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
        },
        "preLaunchTask": "electron-debug",
        "args": ["--remote-debugging-port=9223", "./dist_electron"],
        "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
      },
      {
        "name": "Electron: Renderer",
        "type": "chrome",
        "request": "attach",
        "port": 9223,
        "urlFilter": "http://localhost:*",
        "timeout": 30000,
        "webRoot": "${workspaceFolder}/src",
        "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*"
        }
      }
    ],
    "compounds": [
      {
        "name": "Electron: All",
        "configurations": ["Electron: Main", "Electron: Renderer"]
      }
    ]
  }

在这里插入图片描述

调试异常记录

VSCode日志记录

vue Devtools failed to install: Error: net::ERR_NAME_NOT_RESOLVED
/src/background.js:64
(node:9601) electron: Failed to load URL: http://localhost:8080/ with error: ERR_CONNECTION_REFUSED
(Use `Electron --trace-warnings ...` to show where the warning was created)
<node_internals>/internal/process/warning.js:43
(node:9601) UnhandledPromiseRejectionWarning: Error: ERR_CONNECTION_REFUSED (-102) loading 'http://localhost:8080/'
    at rejectAndCleanup (electron/js2c/browser_init.js:213:985)
    at Object.failListener (electron/js2c/browser_init.js:213:1198)
    at Object.emit (events.js:315:20)
    at Object.callbackTrampoline (internal/async_hooks.js:131:14)
<node_internals>/internal/process/warning.js:43
(node:9601) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
<node_internals>/internal/process/warning.js:43
(node:9601) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

devTools日志记录

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

其他：

INFO  Not launching electron as debug argument was passed. You must launch electron through your debugger.
 INFO  If you are using Spectron, make sure to set the IS_TEST env variable to true.
 INFO  Learn more about debugging the main process at https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/testingAndDebugging.html#debugging.

这些异常都是构建配置不合理导致的，后来重新搭建工程后就没异常了