electron常见问题
# 构建时出现 is not supported since 3.0 anymore. Please move 'build' into the development package.json
把 build 从 package.json 中移除，在 vue.config.js 中写
module.exports = {
runtimeCompiler: true,
pluginOptions: {
electronBuilder: {
builderOptions: {
// build配置在此处
// options placed here will be merged with default configuration and passed to electron-builder
},
},
},
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 生产环境下出现 AxiosError
webPreferences: {
webSecurity: false; // 添加此属性
}
1
2
3
2
3
# Electron Vue 打包后视频无法播放
background.js 加上
const path = require("path");
function registerLocalVideoProtocol() {
protocol.registerFileProtocol("local-video", (request, callback) => {
const url = request.url.replace(/^local-video:\/\//, "");
// Decode URL to prevent errors when loading filenames with UTF-8 chars or chars like "#"
const decodedUrl = decodeURI(url); // Needed in case URL contains spaces
try {
// eslint-disable-next-line no-undef
return callback(path.join(__static, decodedUrl));
} catch (error) {
console.error(
"ERROR: registerLocalVideoProtocol: Could not get file path:",
error
);
}
});
}
app.on("ready", async () => {
registerLocalVideoProtocol();
......
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
然后视频文件放在public文件夹下
引用视频 src="local-video://video1.mp4"
# 页面中出现 require is not defined 或者 __dirname is not defined
配置nodeIntegration 和 contextIsolation
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Cannot read property 'existsSync' of undefined
显示的是fs的existsSync方法不存在
页面中引用使用window.require代替require
const { ipcRender } = window.require("electron");
1
# Node 和 Electron 找 NODE_MODULE_VERSION
Electron 查询网站 (opens new window)
通过 Abi 方式查询
const nodeAbi = require("node-abi");
let a = nodeAbi.getAbi("4.0.2", "electron");
//let b = nodeAbi.getAbi('8.5.5', 'electron')
let b = nodeAbi.getAbi("9.2.0", "electron");
//let c = nodeAbi.getTarget('64', 'node')
let c = nodeAbi.getTarget("64", "node");
let d = nodeAbi.getTarget("82", "electron");
let e = nodeAbi.getAbi("10.1.7", "electron");
//let f = nodeAbi.getTarget('82', 'node')
let g = nodeAbi.getAbi("12.16.3", "node");
let h = nodeAbi.getAbi("11.0.3", "electron");
let i = nodeAbi.getTarget("88", "node");
console.log("a:" + a);
console.log("b:" + b);
console.log("c:" + c);
console.log("d:" + d);
console.log("e:" + e);
//console.log("f:" + f)
console.log("g:" + g);
console.log("h:" + h);
console.log("i:" + i);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# .npmrc
registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
1
2
3
4
2
3
4
# win7支持
electron <= 22版本
node.js <= 16版本
electron-builder <= 23.6.0
# 版本对照
node.js: v16.20.0
electron: v21.4.4
better-sqlite3: v8.6.0 (可选)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 开机自启动
npm install easy-auto-launch -S
1
创建auto-launch.ts文件，写入内容
import AutoLaunch from "easy-auto-launch";
import { app } from "electron";
/**
* 获取开机启动状态
*/
export const getAutoLaunchState = async () => {
if (process.platform === "linux") {
const autoLauncher = new AutoLaunch({
name: app.getName(),
isHidden: false,
path: process.env.APPIMAGE,
});
return await autoLauncher.isEnabled();
}
return app.getLoginItemSettings().openAtLogin;
};
/**
* 更新开机启动
* @param isAutoLaunchEnabled
*/
export const updateAutoLaunch = async (isAutoLaunchEnabled: boolean = true) => {
const electronIsDev = !app.isPackaged;
// Don't run this in development
if (electronIsDev) {
return;
}
// `setLoginItemSettings` doesn't support linux
if (process.platform === "linux") {
const autoLauncher = new AutoLaunch({
name: app.getName(),
isHidden: false,
path: process.env.APPIMAGE,
});
if (isAutoLaunchEnabled) {
await autoLauncher.enable();
} else {
await autoLauncher.disable();
}
return;
}
app.setLoginItemSettings({
openAtLogin: isAutoLaunchEnabled,
openAsHidden: true,
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
在主进程 main 中调用就好了。
app.whenReady().then(async () => {
// enable auto launch
await updateAutoLaunch();
await createWindow();
});
1
2
3
4
5
2
3
4
5
# 主要实现
//应用是否打包
if (app.isPackaged) {
//设置开机启动
app.setLoginItemSettings({
openAtLogin: true,
});
}
//应用是否打包
if (app.isPackaged) {
//获取是否开机启动
const { openAtLogin } = app.getLoginItemSettings();
return openAtLogin;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 开机隐藏到托盘
# window
在 windows 下，setLoginItemSettings方法有一个args参数，利用这个参数就可以达到目的，以下是主要代码：
//设置开机启动
app.setLoginItemSettings({
openAtLogin: true,
args: ["--openAsHidden"],
});
//获取是否开机启动
const { openAtLogin } = app.getLoginItemSettings({
args: ["--openAsHidden"],
});
return openAtLogin;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
设置开机启动时，在 args 中传入--openAsHidden，这个字符串可以随便更改。获取开机启动时，也要在 args 中传入同样的字符串，不然获取不到正确的值。
然后在显示主窗口时，先判断一下 process.argv 中是否包含--openAsHidden，如果包含，说明是开机自动启动的，这时候不显示窗口；相反 如果不包含--openAsHidden的话，说明是用户手动启动软件，这时正常显示窗口就好了：
win.once("ready-to-show", () => {
if (process.argv.indexOf("--openAsHidden") < 0) win.show();
});
1
2
3
2
3
# macOS
mac 下没有args参数，可以通过openAsHidden来实现。以下是主要代码：
//设置开机启动
app.setLoginItemSettings({
openAtLogin: true,
openAsHidden: true,
});
//获取是否开机启动
const { openAtLogin } = app.getLoginItemSettings();
return openAtLogin;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
光设置openAsHidden: true还不行，也需要做一下判断：
win.once("ready-to-show", () => {
if (!app.getLoginItemSettings().wasOpenedAsHidden) win.show();
});
1
2
3
2
3
上次更新: 2025/01/17, 15:55:31