electron打包vue-cli4项目的解决方案1（项目实测）

落日映苍穹つ 2021-07-26 18:04 647阅读 0赞

### 背景： ###

项目已通过vue-cli4框架开发并运行在nginx服务器上（使用了nginx的反向代理），现需要将该项目转成桌面端应用程序，选择electron来实现。

设想2种解决方案：

1、使用electron-quick-start的loadURL方法读取服务的线上url，需要做一个用户URL输入界面便于部署。vue服务的版本迭代部署都和该electron无关；

2、vue-cli项目引入electron并取代nginx服务器的功用

### electron简介： ###

> [Electron 使用][Electron] web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

Electron大家应该不陌生了，**它提供了一种解决方案，让我们能够利用Node.js 和 前端三宝 HTML + JS + CSS 来实现客户端软件**。咋一听感觉像NW.js。其实NW.js（node+websocket）可以算是Electron的前身了，都是出自同个作者之手。关于Electron和NW.js的区别官网上是这么说的。简单讲就是Electron优化了NW.js中的一些不足。 秉着与时俱进的态度，我们当然要使用Electron。有了Electron作为容器，我们小前端就可以用HTML+JS+CSS来开发客户端了。就像开发前端页面一样柔顺。Electron的使用比较简单，提供的API也比较清晰。**核心概念就是Main Process 和 Render Process**。**顾名思义Main Process是主进程，用于运行Electron的基本操作，如创建窗口，创建菜单等。Render Process是渲染进程，我们需要在渲染进程中创建软件界面，每个渲染进程对应的是一个窗口，主进程开启了多个窗口就会有多个渲染进程。**

**通俗解释：electron使用nodejs将web应用套了一层壳使之变成了桌面应用**。**[electron官网][electron]**

### electron-quick-start快速启动项目 ###

下载 `electron-quick-start `demo 或使用git clone后启动

git clone https://github.com/electron/electron-quick-start
    cd electron-quick-start
    cnpm install //这里我用的是cnpm,npm太慢了 
    npm start

启动成功效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1][]

启动流程：关注**main.js**、**package.json**、**index.html**这几个文件。从 **package.json **文件看起，我们运行 **npm start 命令 **其实是 运行了 **electron . 命令**，该命令会从当前目录文件中寻找 **package.json 文件**，找到 **package.json 文件** 然后读取** package.json 文件** 中的 **main 值**，**main值 **指向** main.js文件**，然后**运行 man.js 文件找到index.html文件在主进程创建应用窗口，创建桌面应用实例。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 4][]

注意：

**1、npm start命令中的 “chcp 65001”表示使用utf-8的编码格式，解决console打印乱码的问题**

**2、main进程中“nodeIntegration”配置表示是否集成nodejs模块**

### 如何打包成exe桌面应用程序 ###

**需求分析：**loadURL方法读取服务的线上url，但需要做一个URL输入界面便于用户输入vue服务的地址，因为loadURL方法不管vue服务是否成功都会跳转，url无法访问会导致electron打包后的桌面一片空白，所以尽量在loadURL跳转页面前加以判定

## ##

### ***解决方案一*** ###

流程：

1、打包前需要确认已安装electron和electron-packager、jquery依赖

cnpm install electron --save-dev 
    cnpm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好
    cnpm install jquery  --save-dev

2、在package.json配置文件中修改启动和打包命令

{
      "name": "electron-quick-start",
      "version": "1.0.0",
      "description": "A minimal Electron application",
      "main": "main.js",
      "scripts": {
        "start": "chcp 65001 &&  electron .", //utf8编码格式，启动
        "electron_exe":"electron-packager . --platform=win32 --arch=x64 --overwrite" , //覆盖打包
        "electron_all":"electron-packager ./ notes --all --overwrite"   //全平台打包
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/electron/electron-quick-start.git"
      },
      "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
      ],
      "author": "GitHub",
      "license": "CC0-1.0",
      "devDependencies": {
        "electron": "^11.2.0",
        "electron-packager": "^15.2.0",
        "jquery": "^3.5.1"
      },
      "bugs": {
        "url": "https://github.com/electron/electron-quick-start/issues"
      },
      "homepage": "https://github.com/electron/electron-quick-start#readme",
      "dependencies": {
        "jquery": "^3.5.1" 
      }
    }

3、在mian.js主进程中创建窗口配置nodeIntegration允许使用nodejs功能。这里使用了ipcMain和ipcRender（主进程和渲染进程）通信，见后文或官网

// Modules to control application life and create native browser window
    var electron = require('electron');
    var { app, BrowserWindow, Menu, ipcMain, globalShortcut } = require('electron')
    var path = require('path')
    var { dialog } = require('electron')
    
    var electronScreen = electron.screen; //window.screen 是一个预设值的 DOM 属性, 所以这样写 var screen = require('electron').screen 将不会工作
    
    function createWindow() {
      var mainWindow = new BrowserWindow({ //创建窗口
        // frame:false, //无边框
        width: 1400,
        height: 800,
        // fullscreen: true, //默认全屏展示
        webPreferences: {
          nodeIntegration: true, //false则禁用Node.js的require模块化引入
          preload: path.join(__dirname, 'preload.js'),
          enableRemoteModule: true, //远程模块
        }
      }
      )
      mainWindow.loadFile('index.html') //窗口读取本地文件
    
      // 在开发环境和生产环境均可通过快捷键打开devTools
      globalShortcut.register('ctrl+F12', function () {
        if(mainWindow.webContents.isDevToolsOpened()){
          mainWindow.webContents.closeDevTools()
        }else {
          mainWindow.webContents.openDevTools() // 打开F12调试页面
        }
        
      })
    
    
      //主进程监听渲染进程发过来的数据
      ipcMain.on('asynchronous-message', (event, arg) => {
        try {
          // console.log("主进程收到有效数据-----", arg) // prints "ping"
          mainWindow.loadURL(arg)
        } catch (err) {
          console.error(err)
          mainWindow.loadFile('index.html')
        }
      })
    
      Menu.setApplicationMenu(null)  // 关闭菜单栏.
    
      //快捷键全屏
      globalShortcut.register('ctrl+f11', () => {
        if(mainWindow.isFullScreen()){
          mainWindow.setFullScreen(false);
        }else {
          mainWindow.setFullScreen(true);
        }
      })
    
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(() => {
      createWindow()
      app.on('activate', function () {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) {
          mouseTimer = null;
          createWindow()
        }
      })
    
    })
    
    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
      mouseTimer = null;
    })

4、index.html中可能出现CSP的安全策略，Content-Security-Policy这里可以注释掉了。

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      
      
      
      <title>Hello Boy!</title>
      <style>
        body {
          text-align: center;
        }
        .url-setting {
          height: 20%;
          min-height: 150px;
          font-size: 30px;
        }
      </style>
    
    </head>
    
    <body>
      <h1>Hello World!</h1>
      <hr>
      <div class="url-setting">
        <input type="url" id="vueUrl" placeholder="格式如http://127.0.0.1:8080">
        <button id="linkBtn">进入系统</button>
      </div>
      <script>
        //解决在electron-packager打包为exe时nodejs无法require加载jquery的问题
        window.$ = window.jQuery = require("./node_modules/jquery/dist/jquery.min.js");
      </script>
      <script src="./renderer.js"></script>
    </body>
    
    </html>

5、在renderer.js渲染进程中使用nodejs的require引入jquery会在exe包运行时报错“$ not defined ”，所以在index.html中重新定义$，要注意jquery依赖的文件路径是否能在打包好的electron项目下找到

// This file is required by the index.html file and will be executed in the renderer process for that window.
    // No Node.js APIs are available in this process because `nodeIntegration` is turned off. 
    // Use `preload.js` to selectively enable features needed in the rendering  process.
    
    // ipcRenderer 用于和主进程通信
    const ipcRenderer = require('electron').ipcRenderer;
    //const $ = require('jquery'); //尽管nodeIntegration设置允许继承nodejs后可以正常启动electron，但打包成exe时会报错
    
    //使用 remote 模块，可以调用主进程对象的方法
    const remote = require('electron').remote;
    const dialog = remote.dialog;
    const app = remote.app;
    
    //使用nodejs读取本地文件数据，安装electron-store也可以存储数据，但响应性能受较大影响
    
    //electron-store存储数据
    // const Store = require('electron-store');
    // const store = new Store();
    // const currentUrl = store.get('serveUrl');
    
    const fs = require('fs')
    
    //jquery检查连接的url服务是否有效,适用所有浏览器
    $(document).ready(function () {
      // 执行代码
      var filePath = "./serveUrl.txt"
      if(app.isPackaged){ //app.isPackaged在生产模式则为true
        filePath = "./resources/app/serveUrl.txt"
      }
      fs.readFile(filePath, function (error, data) { //
        if (error) {
          console.log('读取文件失败了',error)
        } else {
          $("#vueUrl").val(data.toString());
        }
      })
    
      function NetPing(pingUrl) {
        $.ajax({
          type: "GET",
          cache: false,
          url: pingUrl,
          data: "",
          success: function () {
            fs.writeFile(filePath, pingUrl,function (error) { //存储用户输入的路径
              if (error) {
                console.log('存储URL失败',error)
              }
             }) 
            ipcRenderer.send('asynchronous-message', pingUrl); //异步将渲染进程的数据传给主进程
          },
          error: function () {
            dialog.showErrorBox("错误提示", "无效网址，请重新输入!")
            $("#vueUrl").val("");
          }
        });
      }
    
      //点击连接vue前端服务
      $("#linkBtn").click(function () {
        let urlVal = $("#vueUrl").val();
        if(urlVal){
          NetPing(urlVal);
        }else {
          dialog.showErrorBox("错误提示", "网址不能为空，请重新输入!")
        }
      })
    });
    
    //接收主进程的信息
    ipcRenderer.on('asynchronous-reply', function (event, arg) {
      // console.log(arg); // prints "pong"
    });

注意：没有使用electron-store存储持久化数据，而是使用nodejs读存到本地文件serveUrl.txt上。引用本地文件时可以用app.isPackaged判断是否是生产环境

6、启动.\\electron-quick-start\\electron-quick-start-win32-x64成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 5][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 6][]

### electron方案优缺点： ###

对比于Cocoa，Qt等传统桌面客户端技术，基于前端技术的实现成本较低（C++牛请忽略）跨平台支持更好（框架都帮你做好了），且天然支持热更新。

由于Electron本身包含了chromium和Node.js的代码, 所以不考虑项目本身体积，**打包后的软件最小仍然有100M+, 这也是Electron最为显著的缺点之一**。所以基本体积是无法避免的，我们只能尽量减小其他开发文件的大小，避免将一些无关包文件也打包进去。为什么要强调这点呢？因为**基于Node.js开发的项目往往会有一个庞大的node\_modules文件夹**，里面包含了一些开发和生产所用的包，也即对应package.json中的dependencies和devDependencies。而devDependencies中的包是不需要打包到软件的。这里推荐使用** electron-packager, 能自动排除dev依赖包，**并支持自定义排除包文件夹。也可以打包出支持不同系统格式的软件。

对于NW.js 有的大多数缺点Electron也有，其中一个通病就是**性能问题，主要是渲染性能方面。**基于webkit引擎来渲染UI界面，跟原生的系统UI还是有一定的差距。毕竟是基于DOM节点的渲染，每次节点的重排都是一次大的开销。这点只能通过在前端框架中来优化，比如利用Virtual DOM等相关技术。而视觉上的缺点则可以通过CSS做到竟可能接近原生控件。

### electron主进程和渲染进程间通信： ###

Electron提供了IPC用于进程间通信。分别是**ipcMain和ipcRender**。该通信机制允许ipcRender向ipcMain发送信号请求，并通过ipcMain返回数据。反回来ipcMain无法向特定的ipcRender发起请求。而且**通信间传递的消息会被格式化为JSON字符串**，所以并不支持在两个进程间传递句柄方法等，也就是不支持上下文传递。假如要实现在渲染进程中点击一个按钮，则关闭客户端窗口，可以通过ipcRender发送一个信号给ipcMain, ipcMain接收到该信号后调用Electron的API关闭窗口。对于类似这种比较简单的指令操作，运用IPC实现就可以了，但是如果操作比较复杂，并且需要传递复杂数据类型，则用IPC就行不通了。Electron提供了另一个**API [remote][]，用于在Render Process中直接操作主进程的方法**。这样就不需要移交Main Process处理，直接在前端页面中调用Electron的API。

// In main process.
    const ipcMain = require('electron').ipcMain;
    ipcMain.on('asynchronous-message', function(event, arg) {
      console.log(arg);  // prints "ping"
      event.sender.send('asynchronous-reply', 'pong');
    });
    
    ipcMain.on('synchronous-message', function(event, arg) {
      console.log(arg);  // prints "ping"
      event.returnValue = 'pong';
    });

// In renderer process (web page).
    const ipcRenderer = require('electron').ipcRenderer;
    console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"
    
    ipcRenderer.on('asynchronous-reply', function(event, arg) {
      console.log(arg); // prints "pong"
    });
    ipcRenderer.send('asynchronous-message', 'ping');

***解决方案二见下文***

[Electron]: https://www.w3cschool.cn/electronmanual/electronmanual-protocol.html
[electron]: https://www.w3cschool.cn/electronmanual/electronmanual-ipc-main.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210202100652498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1]: /images/20210726/5b19faefbf6645cc9d32942503b8c901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210203112637998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210203131304354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210203114128471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210203184352732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021020318442984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8=,size_16,color_FFFFFF,t_70
[remote]: https://electron.atom.io/docs/api/remote/