Electron是一个可以使用前端技术开发一个跨平台桌面应用的框架，简言之就是 一个框架 使用它可以生成桌面应用
1、使用vue脚手架生成vue项目
此处选择vue脚手架2生成项目
vue init webpack test_electron
一系列选择后生成项目
2、将vue项目打包
npm run build
此时会生成dist目录
打包前需要将资源文件路径改为相对路径
此处使用脚手架2 所以在config/build/index.js
build{} 中更改assetsPublicPath: "./"
3、在项目dist目录下开始将打包好的vue项目生成桌面应用
a、下载electron
首先全局下载 sudo npm install electron -g
检查下载是否成功以及版本 electron -v
b、在dist目录下新建文件main.js 和 package.json
const {app, BrowserWindow} =require('electron');//引入electron
let win;
//配置程序运行窗口的大小
let windowConfig = {
width:800,
height:600
};
function createWindow(){
//创建一个窗口
win = new BrowserWindow(windowConfig);
//在窗口内要展示的内容 index.html 就是打包生成的index.html
win.loadURL(`file://${__dirname}/index.html`);
//开启调试工具
win.webContents.openDevTools();
win.on('close',() => {
//回收BrowserWindow对象
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
以上是最基本的代码，复杂的可以自行设计，也可以看官方文档
package.json
{
"name": "test",
"productName": "test-electron",
"author": "jn",
"version": "1.1.1",
"main": "main.js",
"description": "desc",
"scripts": {
"distMac": "electron-builder --mac --x64",
"distWin": "electron-builder --win --x64",
"postinstall": "electron-builder install-app-deps",
"dist": "npm run distWin && npm run distMac"
},
"build": {
"electronVersion": "1.8.4",
"mac": {
"target": [
"dmg",
"zip"
]
},
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [{
"target": "nsis",
"arch": [
"x64"
]
}]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [{
"from": "./static/xxxx/",
"to": "app-server",
"filter": [
"**/*"
]
}],
"publish": [{
"provider": "generic",
"url": "http://xxxxx/download/"
}]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0"
},
"devDependencied": {
"electron-builder": "^22.9.1",
"electron-updater": "^2.22.1"
}
}
package.json更多配置可查看官方文档
https://www.electron.build/configuration/configuration
c、使用electron测试
控制台输入electron .
此时如果正常显示 表示成功 接下来只需要将其生成软件包
4、全局下载electron-builder
sudo npm install electron-builder -g
sudo npm install electron-package -g
5、执行打包命令
electron-builder
此时生成exe包
以上只是描述基本简单使用
生成mac下的包 需要额外配置
需自行百度
