electron将vue项目打包为exe程序
- 将自己的vue项目进行打包
npm run build
可以看到打包后的文件
- 安装electron
npm install electron
将这个地址复制到文件夹中打开
打开后进到/dist里面 然后把这个地址配置环境变量
配置环境变量:在系统变量的path中添加进去
-
安装成功之后,可以看到electron安装后的版本
此时表明安装成功 -
创建主程序的入口文件main.js和相关配置package.json文件,将以下两个文件放入dist文件夹中
main.js
const {app, BrowserWindow} =require('electron');//引入electron
let win;
function createWindow(){
win = new BrowserWindow({
// frame: false, /*去掉顶部导航 去掉关闭按钮 最大化最小化按钮*/
show: false//窗口最大化得加上这个 不然会闪一下
});//创建一个窗口
// win.setApplicationMenu(null)
win.maximize()//窗口最大化
win.setMenu(null)//去掉工具栏
win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html,这里我直接在此写上我正式环境的地址‘prod.xxxx.com/xxx/xxxx’
//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": "demo",
"productName": "项目名称", //这些名称都可以随意命名,不影响
"author": "作者",
"version": "1.0.4",//版本号
"main": "main.js",//主文件入口
"description": "项目描述",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",//程序id
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [
{
"from": "./static/xxxx/",//需要打包的静态资源
"to": "app-server",//静态资源存放路径
"filter": [
"**/*"//打包静态资源文件夹内的所有文件 如果没有静态资源要打包进去,extraResources 这段代码去掉
]
}
],
"publish": [
{
"provider": "generic",
"url": "http://xxxxx/download/"//自动更新的安装包地址,初步使用publish这段代码不需要
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",//不打包成exe程序可以去掉
"electron-updater": "^2.22.1",//不打包成exe程序可以去掉
}
}
配置好之后,dist文件里面是这样的
- 此时可以直接运行了(要在dist目录下运行:electron . 看清楚 这里有个点)
electron .
这样就ok了
- 打包为exe程序
先安装electron-builder,直接在dist目录下安装
npm install electron-builder --save-dev
安装成功后 执行npm run dist进行打包,由于我们package.json中将打包命令electron-builder,定义为了dist,因此我们只需执行npm run dist即可打包
此时可能报错了,说需要将electron-updater版本设置为4.0.0
那么我们按照步骤设置版本
完成之后再次执行打包命令,可以看到,打包完毕
打包时报下面这个错误 大概意思就是这个文件下载不下来 超时了,那么我们直接复制粘贴圈画的地址到浏览器下载下来 解压到C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis
打包成功
此时可以看到,在我们原本vue项目打包后的dist文件夹下,又出现一个dist
直接双击即可执行安装
这样就成功了!
也可以参考此博客:https://blog.csdn.net/qq_41579104/article/details/107340431