vue3集成electron的过程

目录

• 安装阐明
• 创建一个vue3项目
• 安装electron作为开发依靠
• 添加electron设置文件
• electron打包构建

安装阐明

vue集成electron时，会用到两个依靠。分别是electron和electron-builder，前者是开发环境下利用，后者是打包摆设时利用。安装时，可在线安装也可离线安装。所谓离线安装就是本身下载好用到的包，然后放到指定目录下。其实在线安装时间，也是这个过程，只是它本身去下载包。

本次集成过程，没有开VPN，访问github，根本不通。所以最终安装时间，采用了在线+离线方式安装，因为有些包需要从github上下载。整个安装过程如下。

创建一个vue3项目

创建过程参考vue3官网。实行npm run dev运行项目，浏览器页面展示如下：

安装electron作为开发依靠

用上面创建的vue3项目做测试，开始集成electron。实行如下下令开始安装。

通常这一步安装会报如下错误。

这是因为镜像地点问题，有些没有设置，有些无法访问。所以我们直接办动修改镜像地点，改为国内镜像源。

阐明一下，npm的设置文件是.npmrc，相当于Maven中的设置文件settings.xml。都是用来管理依靠包的镜像源。文件路径一样平常在用户目录下，如C:\Users\ZHANGJUN\.npmrc。

我们也可以用下令查找下

如今我们实行如下下令，修改设置文件，将electron镜像源添加进去。我这里用的华为镜像源，用其他的都行。只要能正常访问即可。

如果因为权限问题或其他问题，导致上面下令报错，添加失败。我们也可以直接打开设置文件，手动修改。

可以直接到文件目录下，打开文件，如C:\Users\ZHANGJUN\.npmrc。也可以通过下令打开。实行如下下令后，会弹出npmrc页面，然后将上面地点添加进去。

修改完后，再次实行npm install electron --save-dev。又出现如下错误，后面排查是版本问题。所以安装下令带上版本号。

可以看到，在带上版本后，安装成功。我们也可以在package.json和node_modules中看到添加的electron内容。

添加electron设置文件

在项目跟目录下创建electron目录，然后新增main.js、preload.js等

main.js代码

preload.js代码

这里简朴表明下main.js和preload.js。

main.js

• 任何 Electron 应用步伐的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制应用的生命周期。
• 在此脚本中，利用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中表现网页内容。

preload.js

• 预加载脚本，在electron网页页面加载前实行，可以做一些初始化工作。
• 暴露 Node.js 功能给渲染进程。通过在 preload.js 中利用 exposeInMainWorld 方法，开发者可以将 Node.js 的模块或 Electron 的功能安全地暴露给渲染进程的页面。这样，渲染进程就可以像利用前端库一样利用这些功能，而不需要直接操作 Electron 的远程对象。
• 提供安全的上下文环境：preload.js 运行在一个特别的上下文中，它与页面的普通 JavaScript 环境是隔离的。这样可以防止页面脚本直接访问 Node.js 的某些敏感功能，加强了应用的安全性。
• 模块化管理：preload.js 可以作为模块化管理的入口，将一些通用的逻辑或工具函数预先加载到渲染进程中，以便在差别的页面或组件中复用。

main.js主要用来创建一个window窗口，调用api设置窗口巨细、样式等。并设置开发环境和生产环境下访问地点。

而preload.js主要用来进行一些初始化工作，比如读取设置文件，全局初始化等。

添加完上面两个js后，尚有一个设置要修改。那就是package.json。将type改为commonjs，main改为electron/main.js。然后在scripts中新增一条语句："start": "vite | electron ."

到此设置工作竣事，运行项目，看能否正常表现。实行

页面以window窗口情势运行，内里页面展示和浏览器展示效果一样。至此，vue3开发环境集成electron就根本竣事了。

electron打包构建

项目最终还是要打包摆设，这里利用electron-builder。实行下令安装

修改package.json，添加打包信息。

在scripts标签中新增下令："electron:build": "vite build && electron-builder"。后续实行npm run electron:build 即可完成打包。

新增build字段，添加如下内容：

其中：

• productName：项目名，也是生成的安装文件名
• appId：软件的ID，用来上架各平台
• nsis：软件安装包的交互举动，设置稍多
• win.icon： 应用图标
• win.target.arch：发起设置ia32，适配windows大部门版本
• "asar": false, 打包时不进行加密

修改完后，实行下令。开始打包

构建过程中，会从github上下载三个包，分别是winCodeSign-2.6.0.7z、nsis-3.0.4.1.7z、nsis-resources-3.4.1.7z。前文已经说过，github根本访问不通，所以我这里下载肯定失败。报错如下：

前文也说过，npm在线下载过程也是从远程服务器上把安装包下载到本地。所以这里我就手动把这三个包都下载下来。然后放到对应的electron缓存目录下。至于electron缓存目录及实行过程具体情况，各人仔细百度（根本就是初次将包下载到缓存中，以后直接从缓存中获取）。

electron缓存目录路径为：C:\Users\zjun\AppData\Local

可以看到有两个，electron开发环境时用到，也就是在我们实行npm install electron@29.1.1 --save-dev时，它会把包下载到electron/Cache下。同理，如果这个下令也下载不了，我们也可以先把包下载下来，然后放到这个缓存目录下。包名就是electron-v29.1.1-win32-ia32.zip。

这是electron/Cache下内容

这是electron-builder/Cache下内容。只需将三个安装包放到对应目录下，然后解压即可。

三个包都添加完后，再次实行打包下令：npm run electron:build。不出意外下，打包成功，如下图：

target表现的就是打包后的名称及路径。到这个目录下，双击exe安装。

安装成功后，桌面会有exe的快捷方式。运行看是否正常。

至此。electron的集成和打包根本竣事。

至于某些博主提到的热更新：npm install nodemon -D和下令行合并工具：npm install npm-run-all -D。我发现项目已经有了这些功能，所以就不再安装。需要测试的话，可自行安装测试。

参考文档：

https://blog.csdn.net/weixin_45687201/article/details/136424017

利用electron创建桌面应用及常见打包错误解决_wincodesign-2.6.0.7z-CSDN博客

vite+vue3+electron项目搭建教程_electron vue3 vite设置-CSDN博客

https://blog.csdn.net/qq_39124701/article/details/128299948

简介 | Electron

全网详解 .npmrc 设置文件：比如.npmrc的优先级、下令行，如何设置.npmrc以及npm常用下令等-CSDN博客

到此这篇关于vue3集成electron的文章就先容到这了,更多相干vue3集成electron内容请搜刮脚本之家从前的文章或继承浏览下面的相干文章盼望各人以后多多支持脚本之家！