一份针对于 electron-vue 我的项目整顿的搭建、运行、打包过程的踩坑总结分享
首先为了保障装置效率,采纳 cnpm 或者 yarn 指令来装置,前提是装置了 node 环境
装置全局 yarn,最好设置淘宝镜像
npm install -g yarn
装置全局 vue-cli
npm install vue-cli -g
装置 3.0+ 版本 vue-cli(当初最新曾经到 4.5.6 版本)
npm install @vue/cli -g
若想更新 vue-cli 到最新版,要先卸载以后版本
npm uninstall vue-cli -g
创立 electron-vue 我的项目(办法一):
1、装置 2.0+ 版本 vue-cli
npm install vue-cli -g
2、cmd 关上 F 盘输出指令
vue init simulatedgreg/electron-vue my_project_name
依据本人我的项目须要设置我的项目内容
装置实现之后,我的项目导入编辑器,目录构造如下
3、yarn 装置我的项目依赖
yarn install
工夫长一点,急躁期待 ……
4、运行我的项目
npm run dev
看到可视窗口
5、我的项目打包
npm run build
下图中须要下载这个文件包,然而下载过程很漫长
关上连贯下载压缩包
https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.4.0
之后压缩在 C 盘目录
C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
再次打包,如见下图,则打包胜利
关上我的项目 build 文件,就会看见 .exe 安装包 和一般安装程序一样双击关上装置
创立 electron-vue 我的项目(办法二):
1、降级 vue-cli 到 3.0+ 版本,先卸载以后版本
npm uninstall vue-cli -g
npm install @vue/cli -g
2、同样 cmd 指到 D 盘,装置 vue 我的项目
vue create my_electron_vue
依据须要抉择我的项目配置
如见下图,则装置胜利
3、装置 electron-builder 进入我的项目文件 my_electron_vue,执行如下指令
vue add electron-builder
抉择最新 9.0.0
装置胜利后,我的项目构造如下
main.js 为 vue 主文件
background.js 为 electron 的主过程文件
4、我的项目打包
npm run electron:build
打包胜利
进入我的项目文件夹 dist_electron 中,electron_robot_client Setup 0.1.0.exe 为我的项目安装程序
总结:
第一种办法框架更新较慢,在打包问题上须要从 git 上下载额定工具,工夫老本较高
第二种办法比第一种更前卫,实现的办法也比较简单
举荐应用第二种办法