vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用
- 一、安装
- 1. 把electron的官方demo下载下来
- 2. 安装cnpm
- 3. npm start 启动electron
- 4. 修改vue项目
- 5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下
- 6. electron文件夹中，删除根目录下index.html文件
- 7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html
- 8. electron中，安装打包需要的依赖electron-packager
- 9. 修改package.json，在 scripts 中添加 packager 指令，如下所示：
- 10. 运行命令打包，然后项目中会出现一个的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 xxx.exe 文件，xxx.exe就是这个项目的启动文件
- 二、打包慢问题
- 1. 安装 electron-builder
- 2. 更改npm的源和版本设置
- 3. package.json配置
- 4. 执行打包
- 1.下载 electron-v版本-打包的平台.zip的包
- 2. 下载 winCodeSign
- 3. 下载 nsis
- 三、接口请求问题
- 1. 修改axios模块的baseUrl属性为真实的url地址
- 2. 在electron主启动类（我的是main.js文件）中关闭web权限检查
- 四、静态资源丢失问题
- 五、路由不跳转问题
- 1. vue项目中router/index.js mode:history 注释掉
- 2. electron的cookie获取有问题，将token获取方式改成通过vuex store存储获取
本文主要使用的方法是将自己的Vue项目打包，放到electron官方的demo文件中，修改相应的配置后，生成exe文件。
一、安装
1. 把electron的官方demo下载下来
git clone https://github.com/electron/electron-quick-start
2. 安装cnpm
非必要，这个下载快一些
npm install -g cnpm -registry=https://registry.npm.taobao.org
使用 cnpm -v 查看是否安装成功
使用 cnpm i 安装依赖
3. npm start 启动electron
检查一下是否正常启动
4. 修改vue项目
修改公共路径为相对路径（不修改 npm run build 后会出现白屏情况）
修改vue.config.js中配置为 publicPath:’./'
5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下
npm run build
6. electron文件夹中，删除根目录下index.html文件
7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html
// main.js 原始内容 mainWindow.loadFile('index.html')
// 修改后的内容 mainWindow.loadFile('./dist/index.html')
8. electron中，安装打包需要的依赖electron-packager
cnpm install electron-packager --save-dev
9. 修改package.json，在 scripts 中添加 packager 指令，如下所示：
自己修改一下exe的名字和icon路径，更多配置内容请查阅文档
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
10. 运行命令打包，然后项目中会出现一个的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 xxx.exe 文件，xxx.exe就是这个项目的启动文件
npm run packager
二、打包慢问题
上面的打包方式太慢，使用electron-builder打包
1. 安装 electron-builder
cnpm install electron-builder --save-dev
2. 更改npm的源和版本设置
这个设置可以在你执行安装依赖之前就设置好
//你可以使用终端输入命令
npm set ELECTRON\_MIRROR\=https://npm.taobao.org/mirrors/electron/
npm set ELECTRON\_CUSTOM\_DIR\=16.0.5
或者直接在C:\user\xxx路径下 搜索**.npmrc**然后打开文件进行修改
registry=https://registry.npmjs.org/
ELECTRON\_MIRROR\=https://npm.taobao.org/mirrors/electron/
ELECTRON\_CUSTOM\_DIR\="==16.0.5"
注意:这个版本号需要和你package.json中的版本号相同
3. package.json配置
{"name": "electron-quick-start","version": "1.0.0","description": "A minimal Electron application","main": "main.js","build": {"productName": "myFirstElectron","appId": "com.electron.electron-quick-start","copyright": "xxxx","directories": {"output": "build"},"mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"],"icon": "./dist/favicon.ico"}},"scripts": {"start": "electron .","packager": "electron-packager ./ myFirstElectron --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite","dist": "electron-builder --win --x64"},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^16.0.5","electron-builder": "^22.14.5","electron-packager": "^15.4.0"},"electronDownload": {"mirror": "https://npm.taobao.org/mirrors/electron/"}
}
这里默认是打windows 64位的包.
如果打其他平台的包，只需要更改dist对应的命令，大概怎么配置请百度builder的配置
4. 执行打包
npm run dist
打包需要依赖于三个包，分别是
- electron-v版本-打包的平台.zip的包（如我这里是 electron-v16.0.5-win32-x64.zip ）
- winCodeSign
- nsis
远程下载这三个依赖时，可能会因为超时报错，根据错误提示的地址（如下图）手动安装相应的文件就行。
1.下载 electron-v版本-打包的平台.zip的包
在electron 淘宝镜像：https://npm.taobao.org/mirrors/electron/ 中选择自己需要的版本，如我这是是16.0.5，下载 electron-v16.0.5-win32-x64.zip 和 SHASUMS256.txt ，下载完成后，将 SHASUMS256.txt 文件改成 SHASUMS256.txt-16.0.5 拷入如图位置：
2. 下载 winCodeSign
根据报错信息提示的下载地址，手动下载自己需要的版本，下载 Source code(zip)，我这里是
https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z
下载后解压，拷贝解压后的文件夹中 winCodeSign 文件夹中的所有文件到如图位置：
3. 下载 nsis
根据报错信息提示的下载地址，手动下载自己需要的版本，我这里是
https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z
https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
下载后解压，拷贝解压后的文件到如图位置：
下好后重新执行 npm run dist，会生成 exe 文件。
注意：打包要求ico文件最少是256*256的
三、接口请求问题
electron-bulider 打包后，接口请求前缀变成file://的问题
对基于 electron-builder 插件创建的桌面应用，所有的页面访问都被影射到了文件上，所以配置中的proxy值如： /api 访问都会映射到文件上，对vue的网络代理将失效。解决这一问题可以使用electron的方式实现跨域请求，解决方案如下：
1. 修改axios模块的baseUrl属性为真实的url地址
Vue.prototype.axios.defaults.baseURL ="http://localhost:8088/server";
也可以通过修改 .env.produnction 中的配置来修改 axiosbaseURL 的值，如下：
2. 在electron主启动类（我的是main.js文件）中关闭web权限检查
async function createWindow() {const win = new BrowserWindow({...webPreferences: {...//关闭web权限检查，允许跨域webSecurity: false}})//打包后开启控制台//win.webContents.openDevTools();...
}
四、静态资源丢失问题
vue项目中router/index.js mode:history 注释掉
五、路由不跳转问题
1. vue项目中router/index.js mode:history 注释掉
2. electron的cookie获取有问题，将token获取方式改成通过vuex store存储获取
request.js
permission.js
vue项目通过Electron生成桌面应用相关推荐
- vue 项目中 自动生成 二维码
vue 项目中 自动生成 二维码 最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
- vue项目中自动生成二维码
vue项目中自动生成二维码 我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
- vue项目使用electron打包成桌面应用
打包流程详情步骤: 1.准备工作: a.win7系统则确保node版本在v12以上,electron-builder对系统或版本有要求: b.项目路径不使用中文: c.使用淘宝镜像命令代替npm管理工 ...
- Vue-Cli4.x项目通过electron打包桌面应用程序
发现网上的教程大部分都是vue2.x目录结构不太一样 还有就是将一些问题整合在一起 傻瓜式教程 步骤一 下载electron的demo项目 electorn GitHub 下载demo electro ...
- vue项目打包成.exe桌面应用
1.将vue项目打包成dist文件:npm run build:prod 2.新建文件夹,使用git下载(下载其中一种就行) gitee git clone https://gitee.com/wal ...
- vue项目将页面生成pdf
项目场景: vue项目运行在移动端(企业微信聊天栏工具.企业微信浏览器.微信浏览器.外部浏览器),PC端(微信浏览器.其他厂商浏览器),利用html2canvas将页面生成图片文件,并采用jspdf将 ...
- 将Vue项目代码打包成桌面应用
参考 electron 官网 第一步: 安装Vue脚手架Vue CLI只能用最新版,建议在用官网最新命令行 npm install -g @vue/cli 第二步: 创建vue项目 vue creat ...
- vue项目利用uuid生成唯一随机字符串判定临时游客
我们的项目上线后,除了给用户提供登录注册后,使用该网页功能外,还需要提供临时游客身份,除了进行独立数据的存储,还有给用户拥有临时用该网页一些功能的体验,打游戏的童鞋应该知道,有些游戏会提供临时游客身份 ...
最新文章
- docker 安装使用 mysql
- 面试题整理5 顺时针打印矩阵
- 目标检测领域还有什么可做的？19 个方向给你建议
- 机器学习（二十四）——数据不平衡问题, 强化学习
- 将经过身份验证的用户注入Spring MVC @Controllers
- 小熊派IoT开发板系列教程正式发布——免费学习
- 关于Apache的25个初中级面试题
- 翻译: TensorFlow 2.0 中的新功能
- cnvd与cnnvd区别_漏洞编码CVE/CAN/BUGTRAQ/CNCVE/CNVD/CNNVD都指什么？
- Ubuntu 16.04 安装搜狗输入法
- 了解下HTML5大前端是什么
- 【服务器】服务器安全防护、防止服务器攻击和保护措施
- repo clean
- axure pr动态可视化元件库在哪有_axChart_动态可视化图表元件库v1.2.3
- harmonyos导师姓名,HarmonyOS开发者创新大赛颁奖礼 见证星星之火燃爆盛夏
- react-native报错-Unable to resolve module ‘react’
- 云原生之下，百度智能云Palo如何驰骋大数据疆场？
- Docker Swarm 创建加密覆盖网络
- 「解析」语义分割性能指标 附代码
- 0.96寸OLED显示图片