electron-vue教程,electron windows打包

　　本文主要介绍电子封装vue项目，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。

目录

　　创建项目添加电子构建器电子下载失败表单运行包exe白屏

创建项目

　　点击这里

添加electron-builder

　　1.在项目目录中运行命令：vue add electron-builder。

　　2.添加电子构建器后，将选择电子版本，并直接选择最新版本：

electron下载失败

　　Vue添加电子-builder下载电子会失败，用淘宝图片下载：cnpm i电子。

窗体运行

　　1.下载后试跑电子表：npm跑电子表：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和电子的路由模式，vue一般默认历史模式。

　　2.需要在路由器的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.打包成功：

　　就是这样。本文对电子封装vue项目的方法和步骤进行了介绍。有关电子封装vue项目的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。