[开发心得]Electron应用自动升级 autoUpdater的使用。

前言:

博主主攻后端，对于electron自动升级也是费了非常多的事儿，github、gitee也下载了很多源码。发现案例可能好用，但是很难融入公司的项目。

要注意的点如下:

1.Electron版本问题。

2.Electron-Vue版本问题。(我手里的项目使用的electron-vue版本为"vue-electron": "^1.0.6",对应的electron是 "electron": "^2.0.4",当前最新版是13+了)

3.electron-builder 版本问题。

步骤1:如果您使用的也是低版本的vue-electron，请先手动升级electron版本，至于5、8+、12这几个版本升级废弃的配置，以及对既有项目的影响，还是要注意。我这里例举几个

(1) 单实例启动的变化

const shouldQuit = app.makeSingleInstance(() => {
   if (mainWindow) {
     mainWindow.setSkipTaskbar(false);
     if (mainWindow.isMinimized()) {
       mainWindow.restore();
     } else {
       mainWindow.show();
     }
   }
 });

变更为如下类似的写法

if (!gotTheLock) {
  app.quit();
} else {
  app.on('ready', () => {
    createWindow();
    if (process.platform !== 'darwin') {
      createTray();
    }
    mainWindow.webContents.openDevTools();
  });

ES写法:

src/main下新建一个update.js(其他位置也行，回头我贴个完整的开源案例出来)
 

import { dialog } from 'electron';
import { autoUpdater } from 'electron-updater';
import http from 'http';

// see https://www.electron.build/auto-update#events
autoUpdater.on('update-downloaded', (info) => {
  if (process.env.NODE_ENV === 'production') {
  // https://electronjs.org/docs/api/auto-updater#autoupdaterquitandinstall
  // 这里先拉取更新信息，在对话框中显示版本的更新内容
    const req = http.request('http://localhost:8000/info.txt', (req) => {
      let detail1 = '';
      req.setEncoding('utf-8');
      req.on('data', (chunk) => {
        detail1 += chunk.toString();
      });
      req.on('end', () => {
        dialog.showMessageBox(
          {
            icon: '/static/ico.ico',
            type: 'info',
            title: '软件更新',
            message: `已更新到最新版本（${info.version}）请重启应用。`,
            detail: detail1,
            buttons: ['确定'],
          },
          (idx) => {
            // 点击确定的时候执行更新
            if (idx === 0) {
              autoUpdater.quitAndInstall();
            }
          },
        );
      });
    });
    req.end();
  }
});
export default autoUpdater;

index.js里引入:

import autoUpdater from './update';

然后再createWindow的时候，最后一个位置加入（生产环境下才可检查升级）

if (process.env.NODE_ENV === 'production') {
    autoUpdater.checkForUpdates();
  }

electron版本升级5+之后，默认关于nodejs相关的如下选项不开启。

mainWindow = new BrowserWindow({
    height: 900,
    width: 1500,
    fullscreenWindowTitle: true,
    fullscreenable: true,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true, // 在网页中集成Node
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },
  });

要注意12版本之后，需要开启enableRemoteModule,webPerferences中的这几个选项，在5+版本之后，最好都打开，具体的含义自行阅读文档。解决的问题如下:

1.白屏(白屏的原因很多，大多都是因为5版本之后没有开启那几个选项造成的)

2.报错 

Uncaught ReferenceError: require is not defined

Module ....

甚至是require

我是怎么定位解决这个问题的呢，因为打包的情况下，默认是不开启F12的开发者控制台的，开启打包后开发者控制台选项。

或者按照如下修复:

对于github上给出的解决办法，我在此做出整理。

找到.electron-vue文件目录下的webpack.renderer.config.js文件，修改plugins中的new HtmlWebpackPlugin()为如下代码
new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      isBrowser: false,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

修改src文件夹下的index.ejs文件为下述代码
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
  <script>
    window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  </script>
<% } %>

向src/main/index.js中加入配置选项
function createWindow () {
  // add the webPreferences property passed to BrowserWindow
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })
}

配置完成，打开electron-vue，成功。

原文作者:https://blog.csdn.net/liu19721018/article/details/109090522

感谢!

在dependency中加入只有在devDependency才有的electron-devtools-installer,electron-debug

 "electron-devtools-installer": "^2.2.4",

  "electron-debug": "^1.5.0", 

然后index.js中加入

 mainWindow.webContents.openDevTools();

 3.mainWindow.webContents.setlayoutZoomLevelLimits缩放相关的配置已经废弃了。

mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.setZoomFactor(1);
    mainWindow.webContents.setVisualZoomLevelLimits(1, 1);
    // 8.0 以后已经移除
    // mainWindow.webContents.setLayoutZoomLevelLimits(0, 0);
  });

最重要的就是这个配置,这个是发布必须的:(可以在vue.config,package.json,或者backend.js中配置，有哪个就在哪个配置，别犹豫，这个地址是升级包路径，不需要写具体的名称)

"publish": {
      "provider": "generic",
      "url": "http://localhost:8000/"
 },

然后打包所需(这个跟自动升级没关系哈):

 "nsis": {
    "oneClick": true,
    "perMachine": true,
    "allowElevation": true,
    "allowToChangeInstallationDirectory": true,
    "createDesktopShortcut": true,
    "runAfterFinish": true,
    "installerIcon": "./build/icon.ico",
    "uninstallerIcon": "./build/icon.ico"
  },

然后就是网上遍地飞的了。

注意打包，注意升级服务器等。深夜了，先写这些。