electron-vue打包,electron windows打包
本文主要介绍如何用电子版将vue项目打包成桌面应用程序exe文件，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.首先从电子官网克隆demonpm和cnpm的区别。2.接下来，向新建项目的package.json文件中添加一条指令。在下面附上我的文件目录。如果根据本文遇到一些问题，请报错，比如C:\ Users \ milyyy \ AppData \ Roaming \ NPM-cache \ _ logs \ 2018-11-27t 07 _ 36 _ 17 _ 406 z-debug . log等等
对于解决方案，请参考我的另一篇文章：电子封装VUE项目中的错误报告问题和解决方案。
请把这篇文章的源代码移到我的GitHub地址：好用电子封装vue。
踩过无数坑，遇到过很多问题。最后，提出了可行的解决方案。基本步骤如下：
1.首先从electron官网克隆一个demo
选择您想要储存项目的磁盘。(可以运行cmd直接不新建文件夹，视个人而定)；
这里最值得注意的是npm的依赖包。
npm与cnpm的区别
说到npm和cnpm的区别，我们可能都知道，但是很容易忽略cnpm安装的各种node_module。通过这种方式，所有软件包都是平面安装的。node_modules一次展开，就有很多文件。导致包装过程非常缓慢。但是，如果使用npm来安装node_modules，所有的包都是树状的，层次变得更深。因为这种差异，对于一些项目比较大的应用来说，很容易出现打包进程慢，节点内存溢出的问题。所以建议在打包之前，先删除cnpm安装的依赖包，换成npm安装的依赖包。git克隆https://github.com/electron/electron-quick-start
cd电子-快速启动
Cnpm安装//npm，cnpm没问题，cnpm更快。
npm开始
项目运行后，会出现电子的桌面页面，找到clone下来项目的入口文件main.js和package.json接下来，修改路径和配置。
//- main.js -
函数createWindow () {
//并加载app的index.html。
main window . loadurl(` file://$ { _ _ dirname }/./dist/index . html `)//在此修改
//package.json
{
名称:电子快速启动，
版本: 1.0.0 ，
描述:最小的电子应用，
Main: electron.js ，//-修改以准备以下内容
脚本:{
开始:电子
}
2. 接下来，在已创建好的vue-cli项目中
安装电子依赖项并运行以下命令：
npm安装电子节能开发
npm安装电子打包程序-保存-开发
现在将克隆项目中的main.js复制到新创建的项目中的build文件夹，将其重命名为electron.js，并在config/index.js中更改生产模式(build)下的assetsPublicPth
构建：{
//路径
assets root:path . resolve(_ _ dirname，./dist )，
资产子目录：静态，
AssetsPublicPath:“”。/，//，//在这里它被改为。/
3. 在新建的项目的package.json文件中增加一条指令
如下所示：
脚本:{
dev : web pack-dev-server-inline-progress-config build/web pack . dev . conf . js ，
开始: npm运行开发，
unit : jest-config test/unit/jest . conf . js-coverage ，
e2e :节点测试/e2e/亚军. js ，
测试: npm运行单元npm运行e2e ，
build :节点build/build.js ，
Electron _ dev: NPM运行构建电子构建/electron . js //添加了指令
然后执行：
nrunbuild//生成dist目录(包括静态资源文件)
m运行电子_开发//启动电子
现在，桌面应用的生成已经基本成功实现，只剩下最后一步：打包！
首先，将electron.js从build目录复制到dist目录。请注意，关键步骤是在复制loadURL路径后调整它的格式。
像这样：
函数createWindow () {
//创建浏览器窗口。
mainWindow=new BrowserWindow({
})
//并加载app的index.html。
main window . loadurl(` $ { _ _ dirname }/index . html `)//-modified-
然后，将克隆示例的package.json复制到新创建项目的dist目录中。在项目的package.json中(注意不是dist下的package.json)，为之前下载的e-packager添加一个启动命令。
build :节点build/build.js ，
electron _ dev : NPM run build electron build/electron . js ，
电子建造:电子封装器。/dist/-platform=win32-arch=ia32-icon=。/src/assets/yizhu . ico-overwrite /-新命令-
然后，如果您想要替换应用程序图标，请将您想要设置的exe文件的图标放入。ico格式，位于项目中scr文件夹下的assets目录中。
这是指您的ico图标的名称。前一个的电子构建中的路径将最终被更改为您的图标的名称。和这里的yizhu.ico一样，yizhu.ico是我自己图标的名字。(这个很重要！)
这里我想强调一下，有到这里运行报错的同学，大概就是你的图片路径没改过来。还有一点就是一定要让你的图片强行修改为ico格式了，这点是不允许的.成为原生的ico格式的图标。看看我底部截图中的ico图标。在这里，我附上ico格式的链接。操作简单。
最后，跑
mrunbuild//刷新静态资源文件
m运行电子_构建//启动
此时，aps-win32-ia32文件夹已经生成。找到里面的helloworld.exe文件，你就可以运行它了。当然，我没有在这里重命名文件。你可以自己命名。
至此，exe文件终于完成了。
下面附上我的文件目录
操作几遍，看错误码，仔细看上面说的对症下药。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。