Electron upgrade of electron-vue

Table of contents

1. Problem description:

2. Solution:

3. Matters needing attention:

---

1. Problem description:

Three years ago, when working on the electron project, I chose electron-vue, which is based on vue to construct electron applications.

Recently, due to the development of new functions, there is a requirement for the chrome version, and electron needs to be upgraded, but the third party of electron-vue depends on

Version 1.0.6 has given up the update, and can only be forced to update the electron version for upgrade.

2. Solution:

(1) Download the previous electron installation dependencies, install the required version of electron,

npm uninstall electron

npm install electron

(2) Configure relevant parameters and run

nodeIntegration: true, // Integrate Node in the web page

Solve require is not defined

enableRemoteModule: true, // open the remote module

 contextIsolation: false // Whether to run the Electron API and the specified preload script in a standalone JavaScript environment

Solution: Cannot read property 'app' of undefined

mainWindow = new BrowserWindow({
    height: 720,
    useContentSize: true,
    width: 1280,
    frame: true,
    show: false,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: true, // 在网页中集成Node
      enableRemoteModule: true, // 打开remote模块
      contextIsolation: false // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本
    }
    // transparent: true
  });

3. Matters needing attention:

Parameter description of BrowserWindow: https://www.electronjs.org/docs/latest/api/browser-window

enableRemoteModule configuration official website instructions

In Electron 9, using a remote module without explicitly enabling it via the enableRemoteModuleWebPreferences option started throwing warnings. In Electron 10, remote modules are now disabled by default. To use remote modules, enableRemoteModule: true must be specified in WebPreferences:

const w = new BrowserWindow({
  webPreferences: {
    enableRemoteModule: true
  }
})