使用electron-vue官方模板

1.安装步骤

根据官网步骤执行

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
# my-project  为项目名
vue init simulatedgreg/electron-vue my-project  # 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

2.打包bug处理

2.1. 关于task的bug

这个bug是很多人反馈过的，在.electron-vue/build.js中重复申明了task，导致在打包时报错，所以需要对其中一个task进行重命名，我的习惯是将

onst tasks = ['main', 'renderer']const m = new Multispinner(tasks, {preText: 'building',postText: 'process'})

改为

const tasks1 = ['main', 'renderer']const m = new Multispinner(tasks1, {preText: 'building',postText: 'process'})

2.2.关于electron-xxxx.zip安装下载失败

一般是由网络引起的，需要翻墙下载
解决方法使用（淘宝源或者官方源都可以）并设置electron仓库为淘宝的源

# 官方源
npm config set registry https://registry.npmjs.org
yarn config set registry https://registry.yarnpkg.com# 淘宝源
npm config set registry  https://registry.npm.taobao.org
yarn config set registry  https://registry.npm.taobao.org# 设置electron仓库为淘宝的源  主要是这一步起作用 上面可以使用官方源
# 注意https://npm.taobao.org/mirrors/electron/最后的斜杠不要省略
# 注意url最后的斜杠不要省略
# 注意url最后的斜杠不要省略
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/

2.3关于winCodeSign-2.6.0.7z 或者sis-3.0.4.1/nsis-3.0.4.1.7z 下载出错

winCodeSign-2.6.0.7z 和nsis-3.0.4.1.7z 可以在下面的地址下载

https://github.com/electron-userland/electron-builder-binaries/releases/

下载后解压到 C:\Users\用户\AppData\Local\electron-builder\Cache 目录下就可以了

2.4出现错误Application entry file “dist\electron\main.js” in the “D:\electronWork\new-edu-001\build\win-unpacked\resources\app.asar” does not exist

我们需要安装multispinner

 yarn add multispinner -D

然后在.electron-vue/build.js 文件中添加一句

const Multispinner = require('multispinner')

参考自：
https://www.cnblogs.com/rchao/p/15066256.html
https://blog.csdn.net/latinhui/article/details/117647628

electron-vue项目构建打包错误失败问题合集相关推荐

vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
启动Vue项目发生的错误总结
启动Vue项目发生的错误总结切记:打开 WebStorm的时候用管理员的方式打开 1.安装node_module失败我是用了淘宝镜像 --> 不可行其根本原因是: 版本不兼容 npm c ...
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: $ yarn build or $ npm run bu ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
vue项目构建和部署_零部署：使用Vue和VuePress构建文档系统
vue项目构建和部署 Documentation is food for the developer's soul, and too many times we find it arduous to ...

electron-vue项目构建打包错误失败问题合集