如何使用Electronjs打包vue頁面(vue-cli)打包爲桌面應用——第二節

第一步：將build目錄下的electron.js到dist目錄中，將路徑修改爲

pathname: path.join(__dirname, 'index.html'), 

第二步：將electron-quick-start裏的package.json複製到vue_electron項目的dist中，

將

"main": "main.js",    //

改爲

"main": "electron.js",    //

第三步：在vue_electron項目的package.json中的scripts中新增一條命令

"e_build": "electron-packager ./dist HelloWorld --all --out ./outApp  --overwrite --icon=./src/assets/home.ico"

第四步：如果打包經常出現超時，用淘寶鏡像

npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

第五步：開始打包，打包後的文件夾爲outApp

打包命令釋義：
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

location of project : 項目所在路徑
name of project : 打包的項目名稱
platform : 確定了你要構建哪個平臺的應用（Windows、Mac還是Liux）
architecture: 決定了使用x86還是x64還是兩個架構都需要
electron version: electron 的版本
optional options: 可選選項

npm run e_build

不要用cnpm打包否則會出錯

代碼已經上傳到git，有興趣的同學可以git拉下來自己研究了

git項目地址：https://github.com/wlii/vue_electron.git

git打包成exe文件地址：https://github.com/wlii/vue_electron_exe.git