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

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

1. vue
2. vsCode
3. 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. 

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