vue3集成electron的过程

佳奇

安装说明

vue集成electron时，会用到两个依赖。分别是electron和electron-builder，前者是开发环境下使用，后者是打包部署时使用。安装时，可在线安装也可离线安装。所谓离线安装就是自己下载好用到的包，然后放到指定目录下。其实在线安装时候，也是这个过程，只是它自己去下载包。
本次集成过程，没有开VPN，访问github，基本不通。所以最终安装时候，采用了在线+离线方式安装，因为有些包需要从github上下载。整个安装过程如下。

创建一个vue3项目

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

安装electron作为开发依赖

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

1. npm install electron --save-dev

复制代码

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

这是因为镜像地址问题，有些没有配置，有些无法访问。所以我们直接手动修改镜像地址，改为国内镜像源。
说明一下，npm的配置文件是.npmrc，相当于Maven中的配置文件settings.xml。都是用来管理依赖包的镜像源。文件路径一般在用户目录下，如C:\Users\ZHANGJUN\.npmrc。
我们也可以用命令查找下

1. npm config get userconfig

复制代码

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

1. npm config set ELECTRON_MIRROR https://repo.huaweicloud.com/electron/

复制代码

如果因为权限问题或其他问题，导致上面命令报错，添加失败。我们也可以直接打开配置文件，手动修改。
可以直接到文件目录下，打开文件，如C:\Users\ZHANGJUN\.npmrc。也可以通过命令打开。执行如下命令后，会弹出npmrc页面，然后将上面地址添加进去。

1. npm config edit

复制代码

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

1. npm install electron@29.1.1 --save-dev

复制代码

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

添加electron配置文件

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

main.js代码

1. const { app, BrowserWindow, Menu, session, globalShortcut } = require('electron')
   
2. const { join } = require('path')
   
3. const path = require('path')
   
4. //const preloadPath = app.isPackaged ? "../../preload.js" : "../preload.js";
   
5. const preloadPath = './preload.js'
   
6. const renderProcessApi = path.resolve(__dirname, preloadPath)
   
7. // process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
   
8. // const indexHtml = join(process.env.DIST, "index.html");
   
9. process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true
   
10. const createWindow = async () => {
    
11.   Menu.setApplicationMenu(null)
    
12.   const win = new BrowserWindow({
    
13.     // width: 1024,
    
14.     // height: 768,
    
15.     width: 1040,
    
16.     height: 807,
    
17.     fullscreen: true, //全屏
    
18.     title: 'electron测试项目',
    
19.     // frame: false, //直接去除导航头部
    
20.     show: true,
    
21.     webPreferences: {
    
22.       webSecurity: false,
    
23.       nodeIntegration: true,
    
24.       enableRemoteModule: true,
    
25.       contextIsolation: false,
    
26.       preload: renderProcessApi
    
27.     }
    
28.   })
    
29.   // win.loadFile(join(__dirname, "../dist/index.html"));
    
30.   const env = app.isPackaged ? 'production' : 'development'
    
31.   console.log('env ' + env)
    
32.   console.log('process.env.NODE_ENV ' + process.env.VITE_APP_ENV)
    
33.   const indexHtml = {
    
34.     development: 'http://localhost:5173', // 开发环境
    
35.     // development: join(__dirname, "../dist/index.html"), // 开发环境
    
36.     production: join(__dirname, '../dist/index.html') // 生产环境
    
37.   }
    
38.   if (app.isPackaged) {
    
39.     win.loadFile(indexHtml[env])
    
40.   } else {
    
41.     win.loadURL(indexHtml[env])
    
42.   }
    
43.   globalShortcut.register('Ctrl + Shift + i', function () {
    
44.     win.webContents.openDevTools()
    
45.   })
    
46.   globalShortcut.register('f11', function () {
    
47.     if (win.isFullScreen()) {
    
48.       win.setFullScreen(false)
    
49.     } else {
    
50.       win.setFullScreen(true)
    
51.     }
    
52.   })
    
53. }
    
54. app.whenReady().then(async () => {
    
55.   // if (!app.isPackaged) {
    
56.   //   await session.defaultSession.loadExtension(
    
57.   //     join(__dirname, "../plugins/vuetools6.6.1_0")
    
58.   //   );
    
59.   // }
    
60.   createWindow()
    
61.   app.on('activate', () => {
    
62.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    
63.   })
    
64. })
    
65. app.on('window-all-closed', () => {
    
66.   if (process.platform !== 'darwin') app.quit()
    
67. })

复制代码

preload.js代码

1. // 所有的 Node.js API接口 都可以在 preload 进程中被调用.
   
2. // 它拥有与Chrome扩展一样的沙盒。
   
3. window.addEventListener('DOMContentLoaded', () => {
   
4.   const replaceText = (selector, text) => {
   
5.     const element = document.getElementById(selector)
   
6.     if (element) element.innerText = text
   
7.   }
   
8.   for (const dependency of ['chrome', 'node', 'electron']) {
   
9.     replaceText(`${dependency}-version`, process.versions[dependency])
   
10.   }
    
11. })

复制代码

这里简单解释下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 ."

到此配置工作结束，运行项目，看能否正常显示。执行

1. npm run start

复制代码

页面以window窗口形式运行，里面页面展示和浏览器展示效果一样。至此，vue3开发环境集成electron就基本结束了。

electron打包构建

项目最终还是要打包部署，这里使用electron-builder。执行命令安装

1. npm install electron-builder -D
   
2. 或
   
3. npm install electron-builder@24.13.3 -D

复制代码

修改package.json，添加打包信息。
在scripts标签中新增命令："electron:build": "vite build && electron-builder"。后续执行npm run electron:build 即可完成打包。
新增build字段，添加如下内容：

1. "build": {
   
2.     "productName": "electronDemo",
   
3.     "appId": "electronDemo",
   
4.     "asar": true,
   
5.     "directories": {
   
6.       "output": "dist-electron/${version}"
   
7.     },
   
8.     "files": [
   
9.       "dist",
   
10.       "electron"
    
11.     ],
    
12.     "nsis": {
    
13.       "oneClick": false,
    
14.       "allowToChangeInstallationDirectory": true,
    
15.       "installerIcon": "./electron/icon.ico",
    
16.       "uninstallerIcon": "./electron/icon.ico",
    
17.       "installerHeaderIcon": "./electron/icon.ico",
    
18.       "createDesktopShortcut": true,
    
19.       "createStartMenuShortcut": true,
    
20.       "shortcutName": "electron系统"
    
21.     },
    
22.     "mac": {
    
23.       "category": "your.app.category.type"
    
24.     },
    
25.     "win": {
    
26.       "icon": "./electron/icon.ico",
    
27.       "target": [
    
28.         {
    
29.           "target": "nsis",
    
30.           "arch": [
    
31.             "ia32"
    
32.           ]
    
33.         }
    
34.       ]
    
35.     },
    
36.     "linux": {}
    
37.   }

复制代码

其中：

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

修改完后，执行命令。开始打包

1. npm run electron:build

复制代码

构建过程中，会从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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/32900773o.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！