如何在Vue和React中应用Electron

提醒：本篇文章只是教你简略上手，Electron自身性能是十分弱小的，这里边的联合，只是能让你简略实现一个桌面应用程序！如须要简单的配置electron，倡议去参考官网~

前言

对于咱们来说Electron相当于一个壳子，能够把写好的网页程序嵌入到壳子外面，能够运行在桌面上的一个程序，能够把网页打包成一个在桌面应用程序，也相似咱们平时做的套壳打包的5+app，简略来说就是软件，Electron十分闻名的就是Vscode，想要深刻理解能够查看官网的具体介绍。

提醒：以下是本篇文章正文内容，上面案例可供参考

一、前提

Electron应用的前提是须要装备nodejs环境，所以请查看你的电脑是否装置了nodejs环境
能够在cmd或者powerShell应用node -v查看

二、在Vue和React中疾速应用

提醒：需在Vue和React打包胜利的文件目录下！

残缺配置的文件，我这边上传了gitee，
把文件复制粘贴进去间接npm i就能够！：地址 XLL/electron打包

1. 装置Electron

  1. 在打包后的根目录下 npm init 否则下一步装置的Electron可能会装置到外层vue我的项目里

  2. 在dist文件夹内创立 main.js 文件及 package.json 文件

    以下为main.js内容，可复制粘贴进去，以下为最简略的electron配置，如想要简单的配置，能够去参考一下官网配置
    const {  app,  BrowserWindow,  Menu} = require('electron'); // 引入electronlet win;let windowConfig = {  minWidth: 1600, //最小宽度  minHeight: 800, //最小高度  show: false,  resizable: false  // frame: false,  // fullscreen: false,  // titleBarStyle: 'hiddenInset',  // titleBarOverlay: true}; //窗口配置程序运行窗口的大小function createWindow() {  win = new BrowserWindow(windowConfig); //创立一个窗口  win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展现的内容index.html 就是打包生成的index.html  // win.webContents.openDevTools(); //开启调试工具  // 暗藏菜单栏  Menu.setApplicationMenu(null)  // 默认最大化  win.maximize()  win.show()  win.on('close', () => { //回收BrowserWindow对象 win = null;  });  win.on('resize', () => { // 默认刷新 // win.reload();  })}app.on('ready', createWindow);app.on('window-all-closed', () => {  if (process.platform !== 'darwin') { app.quit();  }});app.on('activate', () => {  if (win == null) { createWindow();  }});// electron限度只能关上一个利用窗口，在有窗口的状况下唤起窗口。const gotTheLock = app.requestSingleInstanceLock()if (!gotTheLock) {  app.quit()} else {  app.on('second-instance', (event) => { if (win) {   if (win.isMinimized()) win.restore()   win.focus() }  })  app.on('ready', () => { // createWindow() const {   Menu } = require('electron') Menu.setApplicationMenu(null) // 暗藏菜单栏  })}
    package.json中批改，能够把下边的间接复制粘贴进去，electron限定了版本号，下边的复制粘贴进去后，在dist根目录下cmd执行npm i下载，如果你的版本号和我这边的有出入，可能打包失败！
    {  "name": "xxx",  "productName": "XXXXX",  "author": "小叮当",  "version": "1.0.0",  "main": "main.js",  "description": "我的项目形容",  "scripts": { "pack": "npx electron-builder --dir", "dist": "npx electron-builder", "postinstall": "npx electron-builder install-app-deps", "start": "npx electron .", "package": "npx electron-packager . relay --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"  },  "build": { "electronVersion": "1.8.4", "win": {   "requestedExecutionLevel": "highestAvailable",   "target": [     {       "target": "nsis",       "arch": [         "x64"       ]     }   ] }, "appId": "demo", "artifactName": "demo-${version}-${arch}.${ext}", "nsis": {   "artifactName": "demo-${version}-${arch}.${ext}" }, "extraResources": [   {     "from": "./static/",     "to": "app-server",     "filter": [       "**/*"     ]   } ], "publish": [   {     "provider": "generic"   } ]  },  "dependencies": { "core-js": "^2.4.1", "create-egg": "^2.0.1", "electron": "^16.2.6", "electron-builder": "^22.14.13", "electron-package": "^0.1.0", "electron-packager": "^12.1.0", "electron-updater": "^2.22.1"  }}

  3. 执行命令： npm run start

    执行胜利，成果如下：（博主这里啥也没写，如果你写了的话，运行的界面应和你写的统一）

    2. 运行胜利后，打包成软件

    执行命令： npm run package

    留神：我这里啥也没写所以是空的，<font color="#f00">你打包之后要是空的就是有问题啦！</font>