electron打包vue项目的方法|electron打包vue项目的方法 步骤
目录
- 创建项目
- 添加electron-builder
- electron下载失败
- 窗体运行
- 打包exe
- 白屏
创建项目 点击这里
添加electron-builder 1、在项目目录下运行命令：vue add electron-builder
2、electron-builder添加完成后会选择electron版本，直接选择最新版：
文章图片
electron下载失败 vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron
文章图片
窗体运行 1、下载完成后尝试运行electron窗体：npm run electron:serve
文章图片
2、窗体运行成功：
文章图片
打包exe 1、运行打包命令:npm run electron:build
文章图片
2、打包时由于会在github下载包，国内网络一般会失败，需要手动下载nsis与winCodeSign(网络允许的话你也可以自己到github下载，这里我下载分享出来了)，点击这里下载，提取码：1uq8，解压后将nsis与winCodeSign复制(替换)到以下目录：
文章图片
3、复制文件后再次运行打包命令即可打包成功：
文章图片
4、打包完成后，项目目录下会多出一个dist_eletron，打包出的exe即在其中，此exe需安装后使用：
文章图片
5、但在dist_eletron的win-unpacked下也会有与项目同名的exe，此exe无需安装即可运行，但依赖同级目录下的文件，不能直接单独使用:
文章图片
白屏 1、到这里其实打包就已经成功完成了，但你打开exe后会发现与在项目中窗体运行不一样，或者直接白屏，这是由于vue与electron路由模式的原因，vue一般默认history模式。
文章图片
2、需要在router的index.js中修改：从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
文章图片
若为vue2的项目则直接将mode的值从history改为hash:
文章图片
3、删除项目中的dist_eletron目录，重新npm run electron:build打包：
文章图片
4、打包成功：
文章图片
【electron打包vue项目的方法|electron打包vue项目的方法 步骤】 到此这篇关于electron打包vue项目的方法 步骤的文章就介绍到这了,更多相关electron打包vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- vue项目实现图形验证码
- vue项目的创建的步骤(图文教程)
- 【从实战带你认识gulp】打包前端项目并实现防缓存
- vue3面试知识点十大问
- Sonic+p4（1）
- bmaplib|bmaplib vue 调用_vue引入百度地图BMapGL，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能。...
- electron打包vue项目
- vue3项目中配置vite.config.ts时使用path模块报错
- vue移动端判断手指在屏幕滑动方向
- Vue开发实践指南之应用入口