vue-cli3.x+electron安装教程

最新推荐文章于 2025-10-22 08:19:18 发布
原创 最新推荐文章于 2025-10-22 08:19:18 发布 · 656 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细记录了使用Vue CLI 3.x结合Electron构建桌面应用的过程，包括环境配置、常见错误解决及依赖安装等关键步骤。

前言

这几天想搞个桌面软件玩玩，然后经过各种安装都靠不住，所以还是打算写一篇文章记录自己安装过程遇到的坑，需要对你有帮助。

教程开始

ps：请自行安装好vue环境

vue create my-electron

在这里插入图片描述

cd 项目名称

在这里插入图片描述
我们使用 electron-builder插件 安装主要为了省事

vue add electron-builder

在这里插入图片描述

问题开始

  1. node install.js报错
  2. Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electron/v1
  3. …

问题解决

再次执行

vue add electron-builder

在这里插入图片描述选择 y，回车
在这里插入图片描述运行项目

yarn electron:serve

在这里插入图片描述这时候要使用cnpm安装electron依赖，cpnm安装传送门

cnpm install --save electron

在这里插入图片描述再次运行项目

yarn electron:serve

在这里插入图片描述还缺少依赖，我们在使用cnpm安装

cnpm install --save electron-devtools-installer

在这里插入图片描述安装好之后，我们在运行

yarn electron:serve

在这里插入图片描述发现没有反应…啥情况，我们等待一下会出现
在这里插入图片描述等着等着，就出现了
在这里插入图片描述搞定~

总结

vue-cli3.x+electron坑很多，你不躺一下不知道多深，我也百度+谷歌+翻github都不靠谱，环境是一个难搞的东西，如果本篇文章对你有帮助不如点个赞、收藏。

vue配置electron，使用electron-builder进行打包【完整步骤】
CMDN123456的博客
08-05 1万+
vue配置electron，使用electron-builder进行打包【完整步骤】
从零搭建vue+electron桌面应用
csdn_chengpeng的博客
07-18 3040
以报错代码为例，手动下载：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z。然后将其复制到下图的目录中（你的目录地址不一定和我的一样，需要根据找到自己的目录地址）这是因为网络的原因导致的，遇到这种情况只能手动下载对应的包，然后粘贴到对应的目录。引入ipcRenderer。监听主进程发送过来的消息。
​​Electron 教程：从背景到 Vue3 桌面应用开发​
最新发布
Rysxt_的博客
10-22 1178
​ 构建 UI，无需学习 C++/Objective-C/Java。Electron 是一个开源框架，由 ​。​ 项目构建），允许开发者使用 ​。​：一套代码可运行在 ​。主进程和渲染进程通过 ​。在 Vue3 组件（如。​ 开发（最初为 ​。
1、electron-vue安装
热门推荐
丶诺风的博客
03-14 4万+
入门指南 这个项目是由 electron-vue 和 vue-cli搭建， 相应中文的文档 点击这里。 此项目请使用node7以上，electron-vue强烈推荐用 yarn ，因为它可以更好地处理依赖关系，并且可以帮助减少最终的打包大小。当然国内的小伙伴使用cnpm也可以。 特别注意出现：Use linting with ESLint? (Y/n)，最好选择n，这样可以避免语法检查，大神...
Electron+vue的使用
俊人呀的博客
03-02 756
.现如今前端框架数不胜数，尤其是angular、vue吸引一大批前端开发者，在这个高新技术快速崛起的时代，自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。 2.Electron是什么？？ 对于我来说Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用nod...
vue安装electron事项
晨曦的博客
11-11 953
(node -v / npm -v),但要注意这里node版本需要尽可能对应,我把我找的对应版本的表提供出来了,会放在文末.如果提示npm版本过低,就升级npm(cnpm install npm@latest -g)4.然后输入yarn install electron --save-dev,可能比较慢,也可能会连接不上,这时我们就可以选中镜像文件到下载:对单独electron包做镜像,具体教程我会放在文末。1.确认安装node.js,(这个自行安装,网上自己找)我使用的是这个命令,可以看到下载进度。
从0开始安装electron-vue之旅
qq_41074373的博客
04-24 460
一、安装node.js 直接下载稳定版本。 打开安装包，一路向下。 在安装的目录下新建两个文件夹：node_cache、node_global npm config set cache "X:\xxxx\node_cache" npm config set prefix "X:\xxxx\node_global" 可以通过npm config list查看修改是否成功。 修改镜像源：npm config set registry https://registry.npm.taobao.
Electron+vue-cli3开发跨平台桌面应用
EtherealSymbol的博客
07-17 1864
这里写目录标题1.创建项目1.1 安装Nodejs1.2 使用cnpm加速下载1.3 为什么不使用electron-vue搭建呢1.4 安装/升级vue-cli31.5 创建vue项目1.6 自动安装Electron1.7 手动安装Electron1.8 编译并启动APP2.配置项目2.1 配置ESLint代码格式检查工具2.2 配置vue3.项目基本设定3.1 主进程和渲染进程简介3.2 APP窗口大小3.3 取消跨域限制3.4 取消菜单栏3.5 设置APP窗口图标3.6 设置APP窗口标题栏名称4.打包
如何正确的安装Electron，并完成vue3+electron的环境搭建
不喜欢BUG，喜欢前端的日子
08-22 5408
本文主要介绍了，如何使用 vue3+electron 的环境搭建配置，其中比较重要的就是在安装 electron 的时候碰到的下载问题如何解决和启动 electron 的时候如何把 vue 内嵌至 electron中，在运行项目的时候正确的启动项目。前人裁树,后人乘凉，希望大家在搭建的时候不会遇到任何bug，欢迎一起交流
【Electron-Vue】搭建Electron-Vue前端桌面应用
aDiaoYa_的博客
04-22 4742
最近准备写一个前端桌面应用，了解到了一个新的框架——Electron，它是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。接下来，我们就来搭建一个基于vue的electron应用吧。
Electron 12 学习（三）Vue 3 安装与配置
05-21 933
全局安装 Vue 3 脚手架： npm i -g @vue/cli Microsoft Windows [版本 10.0.19042.985] (c) Microsoft Corporation。保留所有权利。 D:\WebstormProjects>npm i -g @vue/cli npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated request@2.88.2: req..
如何在一个vue项目中集成electron框架
Yw2026的博客
05-29 1356
nde为v16的，electron版本一般选择 "electron": "^13.0.0",这个过程耗时会比较久，耐心等待，首次加载时会先出现一个网页，然后在构建桌面程序。将electron框架集成到vue文件中，不改变vue文件的原有结构。1、在vue文件中安装electron框架，运行代码。4、打开你的文件中的package文件，查看启动方式。这样就能在网页中打开咱们的vue项目。3、构建桌面应用程序。5、桌面程序构建完成。
安装Electron vue 步骤
weixin_45844542的博客
10-30 667
安装 vue-cli 和 脚手架样板代码 cnpm install -g vue-cli 或者是 npm install -g vue-cli 都可以。 接着安装：vue init simulatedgreg/electron-vue my-project（my-project名称可以更改！） 根据下图进行选择你需要的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201030120139642.jpg?x-oss-process=image/watermark,
vue+electron搭建及打包、打印功能
weixin_46262596的博客
03-20 1963
tip：在vue.config.js文件内配置以下代码，解决electron+vue环境运行下出现__dirname is not defined报错解决方法。4、全局安装后你可以发现background.js文件，electron主进程的代码放在此文件内，渲染进程就交给vue。二、1、可使用 Vue CLI 来添加 Vue.js 到你的 Electron 项目中。先记录到这里，后续遇到问题继续记录！主进程 background.js文件。修改vue.config.js文件。在主进程文件中添加以下代码。
electron（一）：vue成型项目中使用electron
浩星
11-06 7307
前言： 在对electron的认识逐渐加深的情况下，来整理下自己的心得，在网络比较差的情况下，如何快速将一个vue项目引入electron，从而让他可以打包成桌面应用。 目录： 前提+准备工作： 实现步骤： 1、在vue项目npm框中输入：这里是给vue配置electron，注意这里是从国外下载东西，特别慢 2、配置electron版本，回车确定，这里推荐是9, 我这里是9.3.3 3、到这一步，用ctrl+c将他截停，这是因为我的网络太差 了，后面的配置文件，我这边是下不了，...
electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了
qq_32244819的博客
12-07 6852
准备环境： 1、nodejs 1、安装cnpm、yarn npm install -g cnpm --registry=https://registry.npm.taobao.org npm install -g yarn 2、修改yarn的镜像 yarn config set registry https://registry.npm.taobao.org -g 3、设置electron的yarn镜像（要不然安装依赖会出错） 打开C盘下的用户目录（mac就在用户目录下，需要显示隐..
vue-cli3 + electron初始化项目
sunqy1995的博客
09-20 953
vue-cli3安装 npm install -g @vue/cli # OR yarn global add @vue/cli 安装成功后通过命令行查看是否安装成功: vue --version #OR vue -V // 查看当前版本为3.几就是 成功的 项目创建 vue create vue-app 添加electron 使用的是vue-cli-plugin-electron-bu...
【架构】vue-cli集成electron
zyy_333的博客
06-05 1401
本文介绍了一种快速将Web应用转换为桌面端程序，实现代码复用、跨平台部署和便捷更新
vue-cli3+electron构建项目打包踩坑记
qq_41538952的博客
09-01 716
构建项目的过程就不说了,网上一大堆,一搜一大把,主要是讲一下在当前环境下使用electron-builder打包的问题； package.json配置如下： 如图,electron/electron-builder/webpack等都是最新盘本,electron打包是有一个默认安装路径的,并且在不加任何配置的情况下,是直接安装在默认路径下的;目前项目需求打包之后让用户能够自己选择安装路径的;解决过程如下： 1.查看electron官方说明：如下 大概的意思是我们需要配置nsis这一关键项,a
vue2中vue-cli-service怎么使用electron
07-30
在 Vue 2 项目中使用 `vue-cli-service` 集成 Electron，可以通过 `vue-cli-plugin-electron-builder` 插件来实现，该插件为 Vue CLI 提供了对 Electron 的支持，简化了集成流程。以下是详细的集成步骤： ### 1. 创建 Vue 项目（如尚未创建） 如果尚未创建 Vue 项目，可以使用 Vue CLI 创建一个新项目： ```bash vue create my-electron-app cd my-electron-app ``` ### 2. 安装插件 安装 `vue-cli-plugin-electron-builder` 插件： ```bash vue add electron-builder ``` 该命令会自动安装所需的依赖并配置 Electron 支持。如果需要指定 Electron 版本，可以使用以下命令安装特定版本： ```bash npm install --save-dev vue-cli-plugin-electron-builder@latest ``` ### 3. 修改 `package.json` 安装完成后，`package.json` 中会自动添加以下字段： ```json "main": "electron-main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" } ``` 确保 `main` 字段指向正确的主进程文件，通常为 `electron-main.js`。 ### 4. 启动 Electron 开发环境 使用以下命令启动带有 Electron 的开发服务器： ```bash npm run electron:serve ``` 该命令会启动 Vue 开发服务器，并在 Electron 窗口中加载应用。 ### 5. 构建 Electron 应用 完成开发后，可以使用以下命令构建 Electron 应用： ```bash npm run electron:build ``` 该命令会打包 Vue 应用并生成可执行的 Electron 应用程序，支持 Windows、macOS 和 Linux 平台[^1]。 ### 6. 自定义 Electron 主进程 默认情况下，插件会生成一个基础的 `electron-main.js` 文件用于启动 Electron 应用。可以根据需求修改该文件以添加更多功能，例如菜单、托盘图标、系统通知等。 示例 `electron-main.js` 内容如下： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url') let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL(url.format({ pathname: 'localhost:8080', protocol: 'http:', slashes: true })) win.on('closed', () => { win = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } }) ``` ### 7. 配置 `vue.config.js` 如果需要进一步自定义构建配置，可以在项目根目录下创建 `vue.config.js` 文件。例如，配置 `electron-packager` 或 `electron-builder` 的选项： ```javascript module.exports = { pluginOptions: { electronBuilder: { builderOptions: { appId: 'com.example.myapp', productName: 'MyApp', directories: { output: 'dist_electron' }, win: { target: 'nsis' }, nsis: { oneClick: false, allowToChangeInstallationDirectory: true } } } } } ``` ### 8. 注意事项 - 确保 Node.js 和 npm 已正确安装。 - 如果项目中使用了 Vue Router 或 Vuex，插件会自动处理这些依赖。 - 使用 `electron:serve` 时，Vue Devtools 会自动启用，便于调试。 - 如果遇到跨域问题，可以在 `vue.config.js` 中配置代理或在 Electron 的 `webPreferences` 中启用 `webSecurity: false`（仅限开发环境）。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值