A collection of problems encountered during Electron development

1. The platform's private self-signed certificate is not safe

Configure the following code in the main.js file of the Electron application

// 忽略证书相关错误 在ready前使用
app.commandLine.appendSwitch('ignore-certificate-errors')

Because the self-signed CA will not be recognized by the browser, you need to enable Chrome's ignore certificate-related error command, but don't worry that your data will not be encrypted. As long as your certificate is configured correctly, the browser will encrypt the transmission for you

2. The Electron rendering process has the problem of 'require is not defined'

Description of the problem: [email protected] and above versions will report require is not defined error in the rendering process.
Error message:

index.html:20 Uncaught ReferenceError: require is not defined
    at index.html:20

Solution: Turn on BrowserWindow's nodeIntegration: true.

new BrowserWindow({
    
    
    width: 1000,
    height: 600,
    webPreferences: {
    
    
        nodeIntegration: true // 是否完整支持node, [email protected]默认为false
    }
})

Because in the [email protected] series, the nodeIntegration parameter is changed to false by default. In previous versions of electron, this nodeIntegration parameter defaults to true.

3. A short white screen appears on Electron startup

Solution: hide show: false first when creating a form, and then display mainWindow.show() after initialization

mainWindow = new BrowserWindow({
    
    
    height: 600,
    width: 960,
    frame: false,
    minWidth: 710,
    minHeight: 500,
    offscreen: true,
    webPreferences: {
    
    webSecurity: false},
    resizable: true,
    skipTaskbar: false,
    flashFrame: true,
    show: false // 先隐藏
  })
  mainWindow.openDevTools()
  mainWindow.loadURL(winURL)
  mainWindow.on('ready-to-show', function () {
    
    
    mainWindow.show() // 初始化后再显示
  })

4. How to disable local cache in Electron

const app = electron.app
//...
app.commandLine.appendSwitch("--disable-http-cache");
//...
app.on('ready', createWindow)

This key code app.commandLine.appendSwitch("–disable-http-cache") needs to be placed before the ready event.

5. Electron program, how to realize the color tray icon of adaptive appearance mode?

Abandon the officially provided Template naming scheme, but adopt a common naming scheme. Then monitor the system appearance switching event, and set different common icon files according to the event.

if (process.platform == 'darwin') {
    
     
    const {
    
    Tray,nativeImage,systemPreferences} = require("electron"); 
    // const path = require('path'); 
    let tray = null 
    function check_mode() {
    
     
        let ico_1 = ""; 
        let ico_2 = ""; 
        if (systemPreferences.isDarkMode()) {
    
     
            ico_1 = "tray-dark.png"; 
            ico_2 = "tray-dark-press.png"; 
        } else {
    
     
            ico_1 = "tray-light.png"; 
            ico_2 = "tray-light-press.png"; 
        } 
        ico_1 = path.join(__dirname, "./img/" + ico_1) 
        ico_2 = path.join(__dirname, "./img/" + ico_2) 
        if (tray == null) {
    
     
            tray = new Tray(ico_1);
             tray.setPressedImage(ico_2); 
        } else {
    
     
            tray.setImage(ico_1);
            tray.setPressedImage(ico_2); 
        } 
    }
    app.on('ready', () => {
    
     
        check_mode(); 
        systemPreferences.subscribeNotification( 'AppleInterfaceThemeChangedNotification', () => {
    
     
            check_mode(); 
        })
    })
}

6. An error is reported when electron-vue starts: Electron-vue ReferenceError: process is not defined

Html WebpackPlugin:
  ReferenceError: process is not defined

Solution:
Modify the modified content of the two files webpack.renderer.config.js and webpack.web.config.js in .electron-vue under your project file
are the same

new HtmlWebpackPlugin({
    
    
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
    
    
        return {
    
    
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
    
    
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
    
    
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),