使用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

Logo

前往低代码交流专区

更多推荐