Electron-Vue 踩坑記錄

近期上手了Electron-Vue，做一個簡單的桌面應用，打包過程中出現的問題，多的超乎想象，特此記錄

1 打包踩坑

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

1.1.1 重復定義task變量

可以知道打包時為什么會報這個錯誤了。

// 將上面的那個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

這兩個文件下載完成后，存放到下圖所示的路徑

1.2.2 winCodeSign-2.4.0

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

得到壓縮包后，進行解壓，將得到的文件夾拷貝到如圖所示的位置

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 可能的原因一

如果有，刪了重新打包就好了

2.3 Element-ui問題

控制不報錯，但是無法顯示el-table組件或者其他組件，在.election-vue/webpack.render.config.js中進行修改