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