准备VUE项目

可以在以下方式选一种:

  • 新建一个纯VUE项目(顺便考虑下用什么模板来新建)
  • 已有的一个VUE项目

新建项目的过程

1.在项目根目录执行 vue add electron-builder。

2.运行 npm run electron:serve 即完成。

已有项目的过程

1.VUE项目的config,改一下。有的是根目录的vue.config.js,有的是config/index.js,把build->assetsPublicPath的值"/“改为”./"

2.VUE项目build一下:npm run build

3.dist 目录加上electron.js、package.json两个文件:

electron.js :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88


const {
app,
BrowserWindow,
ipcMain,
Tray
} = require('electron'); //引入electron

const path = require('path')
app.commandLine.appendSwitch("--disable-http-cache");

let canQuit=false;


let mainWin;
let windowIco="";
if(process.platform=='darwin'){
windowIco=path.join(__dirname, './resources/kefu_mac.icns')
console.log(windowIco)
}
let windowConfig = {
width: 800,
height: 600,
minWidth:800,
minHeight: 600,
icon: windowIco,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
preload: path.join(__dirname, 'preload.js')
}
}; //窗口配置程序运行窗口的大小
function createWindow() {
mainWin = new BrowserWindow(windowConfig); //创建一个窗口
//mainWin.loadURL(`file://${__dirname}/index.html`);
mainWin.loadURL('http://127.0.0.1:10089/')
//mainWin.webContents.openDevTools(); //开启调试工具
mainWin.on('close', (e) => {
if(canQuit){return;}
mainWin.hide();
e.preventDefault()
});
}

app.on('ready', ()=>{
tray = new Tray(path.join(__dirname, './resources/macTrayTwoTemplate.png'))
createWindow();
tray.on('click',()=>{
if(mainWin != null){
mainWin.show()
}
})
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWin == null) {
createWindow();
}else{
mainWin.show()
}
});
app.on('before-quit',()=>{
canQuit=true;
})

ipcMain.on('openNewWindow',(event,data)=>{
let win=new BrowserWindow({width:500,height:500});
win.loadURL(data.url);
})

ipcMain.on('setBadgeCount',(event,data)=>{
app.setBadgeCount(data.count)
})


// simple web server
const httpServer=require('http-server')
let webRoot=path.join(__dirname, './')
console.log(webRoot)
let op={
root: webRoot
}
httpServer.createServer(op).listen(10089);

其原理是内部启动一个nodejs的http−server,供electron访问。

package.json :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
{
"name": "zhanxiong-kefu",
"productName": "战雄客服",
"author": "Sinco.Zou",
"version": "1.0.0",
"main": "electron.js",
"description": "Zhan Xiong Service",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "com.zhanxiaong.pckefu",
"artifactName": "cang-version−{arch}.${ext}",
"nsis": {
"artifactName": "cang-version−{arch}.${ext}"
},
"extraResources": [
{
"from": "",
"to": "app-server",
"filter": [
"**/*"
]
}
],
"publish": [
{
"provider": "generic",
"url": "cang"
}
]
},
"dependencies": {
"config": "^3.3.7",
"core-js": "^2.4.1",
"electron-package": "^0.1.0",
"electron-squirrel-startup": "^1.0.0",
"electron-updater": "^4.6.5",
"fs-extra": "^4.0.1",
"get": "^1.4.0",
"http-server": "^14.1.0",
"install.js": "^1.0.1",
"moment": "^2.18.1",
"moment-es6": "^1.0.0",
"npm": "^8.10.0",
"registry": "^0.3.0"
},
"devDependencies": {
"@electron-forge/cli": "^6.0.0-beta.63",
"@electron-forge/maker-deb": "^6.0.0-beta.63",
"@electron-forge/maker-rpm": "^6.0.0-beta.63",
"@electron-forge/maker-squirrel": "^6.0.0-beta.63",
"@electron-forge/maker-zip": "^6.0.0-beta.63",
"electron": "18.2.4"
},
"license": "ISC",
"config": {
"forge": {
"packagerConfig": {
"icon": "./resources/kefu_mac.icns"
},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "cang"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {}
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
]
}
}
}

4.切到dist目录下,npm install,不要用cnpm,各种莫名其妙的问题,用yarn也许没问题。

5.在dist目录 electron .运行测试,如果有JS报错,尝试把webpackprod.conf.js的compress注释掉再试。

打包

此步骤只适合已有项目的过程,新建项目自行看package.json里面的命令。

1.切到dist目录:npm install --save-dev electron-forge(需要好长时间)

2.npm run make 一般就可以了。如果需要改程序的图标,在package.json的config->forge->packgerConfig,加上"icon": "./res/xx.icns"即可

即此已完成。