【vue、Electron】搭建一个Electron vue项目过程、将前端页面打包成exe 桌面应用

已于 2024-10-07 22:13:54 修改
阅读量2k 收藏 28
点赞数 12
文章标签： vue.js electron flutter
于 2024-08-27 17:41:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46123200/article/details/141606297
版权

文章目录

前言

在Electron应用中结合使用Vue.js，可以创建功能强大的桌面应用程序。为了将Electron与Vue.js集成，你可以使用electron-vue，一个流行的工具包，它简化了在Electron项目中使用Vue.js的过程。

该篇文章参考：搭建Electron vue项目过程

使用 electron-vue 创建项目

electron-vue 是一个已经配置好的项目模板，集成了Vue.js和Electron，可以快速启动开发。以下是使用electron-vue创建项目的步骤：

1. 安装 vue-cli（如果未安装）

如果你还没有安装vue-cli，需要先安装它：

npm install -g @vue/cli

2. 使用 electron-vue 模板创建项目

使用以下命令创建一个新项目：

vue create my-project

然后，在询问要使用的模板时，选择Manually select features并选择需要的特性（如Babel、Router等）。创建完成后，进入项目目录：

cd my-project

3. 安装和配置 electron-builder

安装electron-builder来处理打包和发布：

vue add electron-builder

4. 运行Electron项目

在安装完所有依赖后，你可以通过以下命令来启动你的Electron应用：

npm run electron:serve

这个命令会启动Electron，并在Vue的开发服务器上运行你的应用。

5. 打包应用

要打包你的Electron应用，可以运行以下命令：

npm run electron:build

这个命令会生成一个适合分发的应用程序包。

可能遇到的问题

  • 解决Electron vue首次启动巨慢无法加载

参考文章：解决Electron vue-cli3.0+首次启动巨慢无法加载 vue-devtool 插件
首次启动可能会等待很久，出现以下信息：

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times

如图

在这里插入图片描述

解决方案：

找到background.js，将下面代码注释：

// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

  • 执行npm run electron:build打包慢

如果遇到执行打包命令反应很慢，如下
在这里插入图片描述
具体代码是：

electron-builder  version=22.14.13 os=10.0.22000 
 • description is missed in the package.json  appPackageFile=C:\Users\16566\Desktop\demo\my-project\dist_electron\bundled\package.json·
 • author is missed in the package.json  appPackageFile=C:\Users\16566\Desktop\demo\my-project\dist_electron\bundled\package.json
 • writing effective config  file=dist_electron\builder-effective-config.yaml
 • packaging       platform=win32 arch=x64 electron=11.5.0 appOutDir=dist_electron\win-unpacked
 • downloading     url=https://github.com/electron/electron/releases/download/v11.5.0/electron-v11.5.0-win32-x64.zip size=78 MB parts=8
 • canceling       signal=interrupt
 • cancelled by SIGINT
 • downloaded      url=https://github.com/electron/electron/releases/download/v11.5.0/electron-v11.5.0-win32-x64.zip duration=1m11.907s
 • cannot unpack electron zip file, will be re-downloaded  error=zip: not a valid zip file

解决方法如下：
参考文章：electron-builder 打包过慢解决
在这里插入图片描述
上图这个目录下找到这个文件 将以下内容粘贴进去就可以了

registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node/
sass_binary_site=https://registry.npmmirror.com/node-sass
phantomjs_cdnurl=https://registry.npmmirror.com/phantomjs
chromedriver_cdnurl=https://registry.npmmirror.com/-/binary/chromedriver/
operadriver_cdnurl=https://registry.npmmirror.com/-/binary/operadriver/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false

  • 如何设置打包的logo、设置exe图标

参考文章：
electron打包应用logo及名称更改
5 分钟配置好 Electron 应用的图标
Electron 打包安装包 更换系统图标（Windows）

可能使用的工具：
图片转ICO、ICO图标生成

准备好图标文件icon.png，然后在background.js 中 找到并添加一行代码

const win = new BrowserWindow({
  width: 1200,
  height:800,
  webPreferences: {
    // Use pluginOptions.nodeIntegration, leave this alone
    // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
  },
  icon: __dirname + '/icon.png' // 设置应用图标路径
});

添加后的文件代码：

在这里插入图片描述

再次执行打包命令 打包后的logo就更换好了

在这里插入图片描述

  • 设置页面程序的大小、窗口大小

在background.js中找到width与height 就是窗口的大小

在这里插入图片描述

  • 如何设置打开窗口的名称/标题

在background.js中添加代码，如下图

在这里插入图片描述
添加后的效果图

在这里插入图片描述

  • 如何设置打包后exe的名称

第一种方法：找到package.json文件 添加下面代码

  "productName": "阿德泰产线负载测试-v1.0.1-adt-1200tk4",

添加代码后的文件图

在这里插入图片描述
第二种方法：找到vue.config.js 文件添加下面代码
参考文章：vue+electron-builder打包桌面应用程序改变其名字

module.exports = {
    runtimeCompiler: true,
    pluginOptions: {
        electronBuilder: {        
            builderOptions: { 
                'productName': '芯片测试数据分析'
                //此处表示打包后的桌面应用程序的名字，可以是中文
            }
        }
    },
}

添加代码后的文件图

在这里插入图片描述
这样打包后的文件名就是按照自定义的了

其他注意事项

  • 主进程和渲染进程：在使用Vue.js时，注意将UI相关的逻辑放在渲染进程中，而业务逻辑可以放在Electron的主进程中。
  • 调试：你可以使用Chrome DevTools调试渲染进程中的Vue.js代码。electron-builder 也支持热重载功能，可以方便地进行调试。
  • Vuex 和 Vue Router：vue-cli-plugin-electron-builder 支持Vuex和Vue Router，适用于构建复杂的Electron应用。
fruge365
关注
Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 2139
Vue+Electron打包桌面应用(从零到一完整教程)
Electron+Vue 项目搭建
gswwxyhk的博客
11-21 2224
环境 node vue electron 安装node node官网http://nodejs.cn/download/，下载安装即可。 npm仓库镜像改为淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装升级vue-cli 查看vue-cli版本 vue -V 安装或更新 npm insta
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
electron框架 Electron框架是一个用于创建跨平台桌面应用程序的开源框架。它基于Node.js和Chromium，可以使用Web技术（HTML、CSS和JavaScript）来构建桌面应用程序。
探索electron-vue：构建现代桌面应用的利器
最新发布
gitblog_01136的博客
09-14 503
探索electron-vue：构建现代桌面应用的利器 electron-vue 项目地址: https://gitcode.com/gh_mirrors/ele/electron-vue ...
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建GitHub的桌面客户端而创建的。它允许使用JavaScript、HTML和CSS等Web技术来构建桌面应用程序，而不需要使用传统的桌面应用程序开发工具。Electron基于Node.js和Chromium的开源项目，它将Node.js的运行时环境和Chromium的渲染引擎结合在一起，使得开发者可以使用Web技术来构建桌面应用程序。Electron提供了丰富的API，使得开发者可以访问操作系统的底层功能，比如文件系统、网络、本地存储等等。Electron的跨平台特性使得开发者可以使用一套代码来构建Windows、macOS和Linux等多个平台的桌面应用程序。它的简单易用性和跨平台性使得它成为了开发桌面应用程序的首选框架之一。 使用人群:学习Electron,将vue项目打包为桌面应用 内容关键词:vue,Electron 用途:将vue项目打包为桌面应用
使用electron将vue-cli项目打包成exe的方法
01-21
如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron') let mainWindow function createWindow () { //
vue结合vue-electron创建应用程序
Sandersonia的博客
03-08 2493
在现有的项目中使用electron，将网页转换成应用程序
2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲
2401_84616230的博客
05-12 1783
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。
第十一章：Electron-Vue创建项目
黄孝果的博客
08-03 1532
首先需要安装vue-cli脚手架 npm install -g vue-cli 详细步骤请看：vue学习（五）—vue-cli构建vue项目目录结构 全局安装Electron npm install -g electron 详细请看：第一章：Electron环境搭建 Electron-Vue创建项目 vue init simulatedgreg/electron-vue my-project 安装依赖并运行你的程序 cnpm install 运行（npm run dev） .
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 3460
vue项目打包成桌面端exe应用（0-1保姆级教程）
搭建Electron vue项目过程
nbsaas-boot基于Request-Response的企业级快速开发框架
08-22 580
在Electron应用中结合使用Vue.js，可以创建功能强大的桌面应用程序。为了将Electron与Vue.js集成，你可以使用，一个流行的工具包，它简化了在Electron项目中使用Vue.js的过程。
Vue项目使用electron打包成.exe文件
08-22
Vue 项目与 Electron 结合可以创建桌面应用程序，而 Electron 是一个开源框架，允许开发者使用 JavaScript、HTML 和 CSS 创建跨平台的桌面应用。 首先，确保你的开发环境满足以下要求： 1. Node.js 版本：Electron ...
Electron系列 -- vue项目打包成.exe文件(通过官方demo的方式)
m0_71071209的博客
07-15 1689
在Inno Setup 里面搭建一个脚本, 通过脚本编辑安装程序的名称, 版本. 快捷键生成, 安装目录等, 是很有必要的, 生成一次后,后续可以一直沿用 ,二次使用选择上一次创建好的脚本, 一键打包即可。打包完毕, node_modules同级 会生成out文件, 点开exe包就是打包好 , 可安装在windows系统上。重点是： mainWindow.loadFile(“./dist/index.html”) 的修改。通过将vue项目打包, 会生成一个dist文件。1. npm 出现 镜像问题。
Electron + Vue3 开发桌面应用
热门推荐
Hyung的博客
01-04 3万+
Electron + Vue3 开发桌面应用
Vue项目打包成exe可执行文件（无瑕疵，完美版）
往事随风
11-09 1万+
Vue项目打包成exe可执行文件 实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可 1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目 git clone https://github.com/electron/electron-quick-start npm i npm run start 2、修改自
vue+electron
yzkdcsdn的博客
10-14 1471
vue+electron
electron+vue项目简单创建
SHALLNY
03-19 2634
当具有electron和vue的基础知识后，可以创建基于vue的electron项目 electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。 在项目里已完成vue-cli脚手架的环境后： 1. 新...
Electron和Vue
carter_yu的博客
05-14 485
文章参考：XCel 项目总结 - Electron 与 Vue 的性能优化 再抄一遍就没意思了，自己去看原文吧～～～ PDF防失联
搭建electron_vue项目
weixin_71329368的博客
09-28 313
搭建electron_vue项目，使用electron镜像解决搭建出现的问题。
搭建一个electron项目，要求vue3
03-25
A：要搭建一个用Vue3框架的Electron项目，可以按照以下步骤进行： 1. 安装Electron和Vue CLI 需要全局安装Electron和Vue CLI，可以使用以下命令进行安装： ``` npm install -g electron npm install -g @vue/cli ``` 2. 创建Vue3项目 使用Vue CLI创建一个新的项目，可以通过以下命令创建： ``` vue create my-electron-project ``` 在创建时选择默认的配置和Babel编译器。 3. 集成Electron 在项目根目录下新建一个`main.js`文件，并在其中引入Electron： ``` const { app, BrowserWindow } = require('electron') function createWindow () { // 创建窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载Vue应用 win.loadURL('http://localhost:8080/') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这个文件主要用于创建一个Electron窗口，同时在窗口中加载Vue应用。 4. 修改Vue配置 在Vue项目中，需要安装一些插件来支持Electron，同时需要进行一些配置。在`package.json`文件中添加以下内容： ``` { "main": "main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build && electron .", "electron:serve": "vue-cli-service build && electron . --serve", "electron:build": "vue-cli-service build && electron-builder" }, "dependencies": { "electron": "^13.1.2" }, "devDependencies": { "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.3" }, "electronBuilder": { "builderOptions": { "appId": "com.example.myapp", "productName": "My App", "win": { "target": "nsis" } } } } ``` 其中`dependencies`添加了`electron`，`devDependencies`添加了`electron-builder`和`vue-cli-plugin-electron-builder`，`electronBuilder`中的配置是为了在打包时使用。 还需要在`src`目录下新建一个`background.js`文件： ``` const { app, BrowserWindow } = require('electron') let mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false, nodeIntegration: true, contextIsolation: false } }) mainWindow.loadURL('http://localhost:8080') }) ``` 这个文件用于创建Electron窗口，同时在窗口中加载Vue应用。 5. 运行程序 现在可以运行程序了，在终端中运行以下命令： ``` npm run electron:serve ``` 这个命令会同时启动Vue开发服务器和Electron程序，用于测试程序。 6. 打包程序 如果需要打包程序，可以运行以下命令： ``` npm run electron:build ``` 这个命令会生成打包文件，可以在`dist_electron`目录下找到打包结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

fruge365

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

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

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

打赏作者

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

抵扣说明：

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

余额充值