electron-vue創建項目

1、安裝npm install -g @vue/cli @vue/cli-init

@vue/cli-init 應該就是為了可以創建vue-cli2項目

@vue/cli-init 沒有安裝的話 下面的指令無法執行

2、執行命令創建項目 vue init simulatedgreg/electron-vue 項目名

3、cd 到剛才創建的項目

4、安裝electron 自帶的版本太舊了 yarn add electron@13.1.2 -D 我這里指定比較新的版本安裝

5、執行yarn install 安裝其他組件

 

運行出錯，在主進程src/main/index.js中 添加 webPreferences

electron 在10.x版本以后默認關閉了remote

enableRemoteModule 開啟remote

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

 

打包出錯問題

1、打包直接出錯 tasks變量重復了，我把前面的修改為_tasks

.electron-vue/build.js

 

 

2、出現錯誤electron-v13.1.2-win32-x64.zip 或者 electron-v13.1.2-win32-ia32.zip下載錯誤

從網上搜索github網站無法訪問或者下載慢問題，使用了修改host文件的方法，感覺有點用，多次打包情況下還是下載下來了

3、出現錯誤 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')

4、winCodeSign-2.6.0.7z 也是一直下載出錯，自動下載好幾遍才下載下來

5、nsis-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 目錄下就可以了

 

electron-xxxxxx.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/