Ready to write a series, first put the flag on ~

  • Making the source code
  • (1) Project construction and problem solving
  • 2. Electron -vue development Note (2) Multi-window single page entry configuration
  • 3. Electron -vue development Note (3) Multi-window multi-page entry configuration
  • Microelectron -vue development note (4) the main process breakpoint debugging vscode configuration
  • 5. Electron – Vue development Notes (5) Integrate SQLite database

Vscode debugging

First take a look at vscode debugging configuration, refer to the official website.

configuration

  • On the debug page, click Add Configuration
  • Selecting Node.js will automatically create the launch.js file in the.vscode/ directory.
  • Click on the lower right corner to create a configuration of type “Electron Main” or copy the following code: 
    {
    "name": "Electron Main"."program": "${workspaceFolder}/.electron-vue/dev-runner.js"."request": "launch"."skipFiles": [
        "<node_internals>/**"]."type": "node"."autoAttachChildProcesses": true
}
Copy the code
  • Open the symbol table to modify the main process. Electron – vue/webpack. Main. Config. Js file, add
  devtool: "source-map".Copy the code

The effect

Press F5 or the sidebar to enter the debug mode. Attach the electron process by starting the debug process. After running, you can see the two processes in terminal.

An error to solve

Problem 1 Error: spawn XXX EACCEs

The solution

Feel is the file permissions problem, put the project under the file directly chmod 777 good.

TypeError: Cannot read property ‘endsWith’ of undefined

The solution

Comment out the following error code in the.electron-vue/dev-runner.

// // detect yarn or npm and process commandline args accordingly
// if (process.env.npm_execpath.endsWith('yarn.js')) {
//   args = args.concat(process.argv.slice(3))
// } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
//   args = args.concat(process.argv.slice(2))
// }
Copy the code

Happy Ending

Making the source code

Reference documentation

  • www.ruanyifeng.com/blog/2018/0…
  • Chuchencheng.com/2018/07/02/…
  • Webpack.docschina.org/configurati…