Electron-Vue 踩坑记录

近期上手了Electron-Vue,做一个简单的桌面应用,打包过程中出现的问题,多的超乎想象,特此记录

1 打包踩坑

1.1 .Election-vue/build.js文件的坑

1.1.1 重复定义task变量

image

可以知道打包时为什么会报这个错误了。

// 将上面的那个task变量改为task1,简单些
const tasks1 = ['main', 'renderer']
const m = new Multispinner(tasks1, {
	preText: 'building',
	postText: 'process'
})

1.1.2 找不到Multispinner依赖

还是上图,可以看到图片中的第二行使用了Multispinner对象,在初始化项目时,是不会下载Multispinner相关依赖的,需要自行yarn或npm下载,并且导入一下

yarn add multispinner
npm install multispinner
const Multispinner = require('multispinner')

1.2 从github上下载文件的问题

感谢大佬的踩坑:https://segmentfault.com/a/1190000018533945

npm run build的过程中,会从github上下载5个文件,我即便是FQ了也会出现下载失败的问题,何况没FQ。
这时候,需要自己看报错信息,它会告诉你压缩包的下载地址(或者自己上github找),自己复制一下用迅雷下吧。

1.2.1 electron-v2.0.18-win32-x64.zip 和 SHASUMS256.txt

这两个文件下载完成后,存放到下图所示的路径
image

1.2.2 winCodeSign-2.4.0

image

1.2.3 nsis-3.0.3.2 和 nsis-resources-3.3.0

nsis-3.0.3.2下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.3.2

得到压缩包后,进行解压,将得到的文件夹拷贝到如图所示的位置
image

2 Vue的相关问题

2.1 点击相同路由产生冗余的问题

import Router from 'vue-router'
Vue.use(Router)
// 下面的代码可以解决问题(至少对于我来说)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

2.2 Electron打包成exe后,路由无法正常跳转

2.2.1 可能的原因一

image
如果有,删了重新打包就好了

2.3 Element-ui问题

控制不报错,但是无法显示el-table组件或者其他组件,在.election-vue/webpack.render.config.js中进行修改
image

posted @ 2021-06-28 16:36  silverbeats  阅读(1175)  评论(0编辑  收藏  举报