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

Electron开发过程中遇到的问题集合
1. 平台私有自签发证书不安全的问题
2. Electron渲染进程，出现‘require is not defined’的问题
3. Electron启动出现短暂的白屏
4. Electron 如何禁用本地缓存
5. electron程序，如何实现自适应外观模式的彩色托盘图标？
6. electron-vue启动时报错：Electron-vue ReferenceError: process is not defined
1. 平台私有自签发证书不安全的问题
在Electron应用的main.js文件配置以下代码

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

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

2. Electron渲染进程，出现‘require is not defined’的问题
问题描述： electron@5.x以上版本，在渲染进程中会报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, electron@5.0默认为false
    }
})

因为electron@5.0系列中，这个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
1
2
解决方法：
修改你项目文件下.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
    }),
————————————————