Electron允许程序员重用网页代码，使用HTML、CSS、JavaScript构建桌面应用程序，并在不同的平台上使用。Electron的官方网站说：“比你想象的要容易”——“如果你能建立一个网站，你就能建立一个桌面应用程序。”Electron是一种使用JavaScript、HTML和CSS来创建原生程序的网络技术。一个负责繁重工作的框架，您只需专注于应用程序的核心。”Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue旨在从下到上逐层应用。目前Vue已经成为继Rect之后最流行的前端开发框架，我找到了一个插件：vite-plugin-electron，可以很方便的帮助我们将electron和vue结合起来，开发起来也很方便，目录结构设计是因为我们需要使用Electron和vue进行开发，我们将它们分别存放在不同的目录下，基本目录结构如下：electron-main：主进程目录electron-preload：预加载代码目录，主要定义桥接通信其他文件:也就是vue初始化后的目录，之所以目录结构设计成这样是因为我们使用的vite-plugin-electron插件需要使用这样的目录结构，并且没有设置modifi阳离子呢。初始项目在初始项目目录下启动：yarncreateviteelectron-desktop--templatevue-ts首先使用vite创建一个vue项目，然后我们将electron嵌入其中。初始化完成后，我们先在本地配置一个yarn源，防止下载库时出现异常。configuration.yarnrcregistry"https://registry.npm.taobao.org/"electron_mirror"https://npm.taobao.org/mirrors/electron/"electron_builder_binaries_mirror"http://npm.taobao.org/mirrors/electron-builder-binaries/”配置好下载源后，就可以安装electron了。安装Electronyarnadd-Delectronelectron-builderrimrafvite-plugin-electronelectron-devtools-installerelectron-builder:packagingtools。rimraf：快速删除文件或目录的工具。vite-plugin-electron：Vite是一个结合了electron的库。该插件请参考Vite与Electron无缝对接。electron-devtools-installer：电子开发工具。vite-plugin-electron插件结合了vite和electron，可以让我们很方便的结合electron和vue，需要一些特定的配置。electron项目初始化，请参考electron官网的快速启动项目。创建主进程目录和文件。//electron-main/index.tsimport{app,BrowserWindow}来自'electron'；从'path'导入路径；constcreateWindow=()=>{constwin=newBrowserWindow({webPreferences:{contextIsolation:false,nodeIntegration:是的，预加载：path.join(__dirname,'../electron-preload/index.js'),},});如果(app.isPackaged){win.loadFile(path.join(__dirname,'../index.html'));}else{//使用['ENV_NAME']avoidvite:definepluginconsturl=`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`;win.loadURL(url);}};app.whenReady().then(()=>{createWindow();app.on('activate',()=>{//在macOS上，当//停靠栏图标被单击并且没有其他窗口打开。if(BrowserWindow.getAllWindows().length===0)createWindow();});});app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});需要注意的是，导入的预加载文件应该是打包后的js文件，路径与ts文件相同。只要把类型改成js，就可以创建预加载的目录和文件了。在预加载文件中，我们打印系统平台。//electron-preload/index.tsimportosfrom'os';console.log(os.platform());在tsconfig.json中配置vite-electronsconfig.json监听electron相关文件和提示。"include":[...,"electron-main/**/*.ts","electron-preload/**/*.ts"],vite.config.tsconfigurationimport{defineConfig}from'vite';从'@vitejs/plugin-vue'导入vue；从'path'导入*作为路径；从'vite-plugin-electron'导入电子；从'vite-plugin-electron/renderer'导入electronRenderer；从'导入polyfillExportsvite-plugin-electron/polyfill-exports';exportdefaultdefineConfig({plugins:[vue(),electron({main:{entry:'electron-main/index.ts',},preload:{//必须使用绝对路径，这是汇总输入的限制：path.join(__dirname,'./electron-preload/index.ts'),},}),electronRenderer(),polyfillExports(),],build:{emptyOutDir:false,//必须配置，否则electron相关文件不会生成构建文件},});配置主进程和预加载脚本地址。package.json配置{“name”：“electron-desktop”，“private”：true，“version”：“1.0.0”，“main”：“dist/electron-main/index.js”，“scripts”:{"dev":"vite","build":"rimrafdist&&vitebuild&&electron-builder"},"dependencies":{"vue":"^3.2.25"},"devDependencies":{"@vitejs/plugin-vue":"^2.3.1","electron":"^18.2.0","electron-builder":"^23.0.3","electron-devtools-installer":"^3.2.0","rimraf":"^3.0.2","typescript":"^4.5.4","vite":"^2.9.5","vite-plugin-electron":"^0.4.3","vue-tsc":"^0.34.7"}}主要是添加入口文件，因为electron还没有原生支持ts，所以目前必须加载js文件，所以我们配置入口文件作为解析后的js文件路径：dist/electron-main/index.js，然后修改执行脚本，在build命令中加入electron-builder打包命令。electron-builder打包配置#package.json{......,"build":{"appId":"com.electron.desktop","productName":"ElectronVueVite","asar":true,"copyright":"Copyright?2022XingXaiXian","directories":{"output":"release/${version}"},"files":["dist"],"mac":{"artifactName":"${productName}_${version}.${ext}","target":["dmg"]},"win":{"target":[{"target":"nsis","arch":["x64"]}],"artifactName":"${productName}_${version}.${ext}"},"nsis":{"oneClick":false,"perMachine":false,"allowToChangeInstallationDirectory":true,"deleteAppDataOnUninstall":false}}}我们有一篇关于electron-builder配置的特别文章。这里没有特殊的配置，根据自己的需要配置即可。这里所有的文件都配置好了，接下来我们执行开发命令看看效果。yarnrundev然后我们执行打包命令看看效果。执行yarnrunbuild后会生成两个目录：dist和release。dist目录下生成前端打包文件，release下生成electron打包文件，内容如下：被安装。直接压缩这个目录后就可以发给别人了。解压即可使用。ExectronVueVite_1.0.0.exe文件为安装包。打开它会显示安装过程。安装过程完成后，可以在系统控制面板的软件列表中看到该软件，也可以卸载。打开后就是正常的软件界面。既然我们已经创建了项目结构，那么在使用Vue开发Electron桌面应用时还有一个重要的知识点需要了解，那就是消息通信。在新版本的electron中，推荐使用上下文隔离的方式进行进程内部通信。electron官网有很详细的介绍和例子。这里我们只介绍一种方法。其他方法可以通过查看官网示例了解。我们的例子是在Vue界面显示当前系统平台。注册上下文隔离接口，在electron-preload/index.ts中添加如下代码：importosfrom'os';import{contextBridge}from'electron';contextBridge.exposeInMainWorld('electronAPI',{platform:os.platform(),});编写上下文隔离接口的打字稿类型声明。通过electron注册的上下文隔离接口会添加到window对象中，但是原来的window对象是没有这些接口和属性的，ts会报错。这时候，我们就需要把它写成ts类型声明文件.d.ts。//src/types/global.d.tsexportinterfaceIElectronAPI{platform:string;}declareglobal{interfaceWindow{electronAPI:IElectronAPI;}}Vue中调用接口我们在App.vue中调用window.electronAPI.platform接口，在接口上显示系统平台信息。//src/App.vue
