Electron开发过程中遇到的问题集合

1. 平台私有自签发证书不安全的问题

在Electron应用的main.js文件配置以下代码

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

因为自签名的CA不会被浏览认可，因此需要把Chrome的忽略证书相关错误命令开启，但不用担心你的数据不会被加密，只要你的证书配置正确，浏览器都会为你加密传输的

2. Electron渲染进程，出现‘require is not defined’的问题

问题描述： [email protected]以上版本，在渲染进程中会报require is not defined 的错误
错误提示：

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

解决方法： 开启BrowserWindow的nodeIntegration: true。

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

因为[email protected]系列中，这个nodeIntegration参数，默认改成false了。而在以前版本的electron中，这个nodeIntegration参数，默认为true。

3. Electron启动出现短暂的白屏

解决方法： 创建窗体时先隐藏show: false，初始化后再显示 mainWindow.show()

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. Electron 如何禁用本地缓存

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

这句关键代码app.commandLine.appendSwitch("–disable-http-cache")，需要放置在ready事件之前。

5. electron程序，如何实现自适应外观模式的彩色托盘图标？

摒弃官方提供的Template命名方案，而是采用普通的命名方案。然后监控系统外观切换事件，根据事件设置不同的普通图标文件。

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. electron-vue启动时报错：Electron-vue ReferenceError: process is not defined

Html WebpackPlugin:
  ReferenceError: process is not defined

解决方法：
修改你项目文件下.electron-vue里面的webpack.renderer.config.js和webpack.web.config.js
两个文件修改的内容都是一样的

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
    }),