关于前端:如何在Vue和React中使用Electron

如何在 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'); // 引入 electron
   let 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>