Electron-Vue前端开发准备

最新推荐文章于 2026-05-17 17:11:54 发布

原创最新推荐文章于 2026-05-17 17:11:54 发布 · 441 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了如何通过Node.js和Yarn配置环境，创建并优化一个基于Vue CLI的Electron应用，包括添加electron-builder、禁用Vue DevTools、配置调试任务和launch.json。适合初学者了解Electron开发流程。

一、项目前准备

1、安装node.js

2、安装yarn：

npm install -g yarn

3、配置yarn使用淘宝镜像：

yarn config set registry https://registry.npm.taobao.org

4、安装Vue CLI：

yarn global add @vue/cli

二、创建Electron-Vue项目

1、创建Vue项目：

vue create [项目名]

2、添加electron-builder：

vue add electron-builder

3、去掉加载Vue.js开发工具

加载过程很慢，一般不会成功（墙的原因）。打开background.js，把以下代码注释：

if (isDevelopment && !process.env.IS_TEST) {
  // Install Vue Devtools
  try {
    await installExtension(VUEJS_DEVTOOLS)
  } catch (e) {
    console.error('Vue Devtools failed to install:', e.toString())
  }
}

4、加入主进程的调试代码

添加.vscode文件夹，然后加入tasks.json和launch.json两个文件。

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "app-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": "EnviroGuardApp",
            "type": "node",
            "request": "launch",
            "protocol": "inspector",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "preLaunchTask": "app-debug",
            "args": [
                "--remote-debugging-port=9223",
                "./dist_electron"
            ],
            "outFiles": [
                "${workspaceFolder}/dist_electron/**/*.js"
            ]
        }
    ]
}

标签

#Vue #Electron #前端