vue项目使用electron打包成桌面应用

打包流程详情步骤：

1、准备工作：

a、win7系统则确保node版本在v12以上，electron-builder对系统或版本有要求；

b、项目路径不使用中文；

c、使用淘宝镜像命令代替npm管理工具

npm install -g cnpm --registry=https://registry.npm.taobao.org

d、命令窗口中可以使用 “ cd.. ” 返回上一级目录

e、修改config > index.js 文件

和 bulid > utils.js文件中的图片路径

2、使用 npm run build 对vue项目打包生成dist 文件

3、cd dist 命令切换到dist文件夹目录下安装依赖，后续操作都在该文件下

使用命令 npm install --save-dev moduleName@version 安装开发依赖
"devDependencies": {"electron": "^7.1.9","electron-builder": "^22.9.1"
},使用命令 npm install -S moduleName@version 安装运行必备依赖
"dependencies": {"core-js": "^2.4.1","electron-packager": "^12.1.0","electron-updater": "^4.0.14"
}

4、在dist文件下创建主程序入口和package.json配置文件

main.js

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {width:800,height:600,webPreferences: {contextIsolation: false}
};//窗口配置程序运行窗口的大小
function createWindow(){win = new BrowserWindow(windowConfig);//创建一个窗口win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.htmlwin.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","artifactName": "demo-${version}-${arch}.${ext}","nsis": {"artifactName": "demo-${version}-${arch}.${ext}"},"extraResources": [{"from": "./static/xxxx/","to": "app-server","filter": ["**/*"]}]},"devDependencies": {"electron": "^7.1.9","electron-builder": "^22.9.1"},"dependencies": {"core-js": "^2.4.1","electron-packager": "^12.1.0","electron-updater": "^4.0.14"}
}

5、执行命令 electron . 使项目转为应用程序展示如图

5、执行命令 electron-builder 将项目打包为应用程序包如图

问题记录：

1、页面空白

解决方式：使用正确的依赖路径，路由不使用history模式；

2、electron-builder错误⨯ Get "https://github.com/electron/electron/releases/download/v1.8.4/electron-v1.8.4-win32-x64.zip"

解决方式：下载对应版本到 C:\Users\*****\AppData\Local\electron-builder\cache\ 位置。需要注意的是，不仅要下载这个压缩包，还要把对应的SHASUMS256.txt-文件也下载下来放进去；

参考链接：

流程细节参考https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html

修改应用窗口图标、名称、尺寸等参考https://zhuanlan.zhihu.com/p/75764907

vue项目使用electron打包成桌面应用相关推荐

vue项目使用hbuildX打包成app
一.打包 1.在vue.config,js中加入 publicPath: './', 配置,防止打包后产生空白页 2.在axios.js中的默认服务器配置直接写服务器名称,在router里面配置路由模 ...
vue项目利用Hbuilder打包成APP流程，以及遇到的坑
目录 1.打包项目 1.1打包的app出现白屏. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 1.3.点手机物理按钮,直接退出程序. 2.Hbuilder发布 ...
Vue项目转apk打包成手机APP详细步骤
第一步: assetsPublicPath:' / ' =====> 替换成 assetsPublicPath:' ./ ' 第二步: 终端输入npm run build 打包项目生成 dis ...
Vue 打包成桌面应用 vue打包成桌面应用 vue 打包桌面应用 vue 部署桌面应用 vue部署为桌面应用 vue部署为桌面应用 vue 桌面应用
文章目录使用到的工具 electron 第一步打包 dist 第二步创建配置文件 main.js package.json 第三步安装 Electron 第四步测试运行第五步安装 el ...
【Electron】使用Electron将web项目打包成桌面应用程序
目录一.所需环境&打包前准备 1.安装node.js 2.安装electron 3.web项目二.打包过程 1.打包配置 2. 安装打包器 3.执行打包命令: Electron是由GitH ...
vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一.安装 1. 把electron的官方demo下载下来 2. 安装cnpm 3. npm start 启动electron 4. 修改vue项目 5. 打 ...
vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程
关于vue项目使用nwjs打包.替换exe桌面图标以及exe内容的图标全教程单纯的打包exe(不含更改exe桌面图标以及内容图标) 前言:首先我们需要有一个自己的vue项目. 1)单纯前端自己玩的v ...
Electron如何在UOS操作系统(统信)下打包成桌面应用？
目录 1.前言 2.解决双击.点击.无法安装.无法运行程序的方法 3. 将appimage文件转为deb文件 4.闭坑!Electron打包成deb文件 1.前言在UOS系统下,deb软件包是可以安 ...
将网站打包成桌面程序并生成安装包（跨平台）
一.Nativefier将网站打包成桌面程序介绍 Nativefier 是一个命令行工具,仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序,应用程序通过 Electron打包成系统可执行文件 ...