使用electron將vue-cli項目打包爲exe

步驟一. 從官網上clone一個例子

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

項目跑起來以後，就會出現electron的桌面頁面，大概看一下入口文件main.js 和package.json

步驟二. 使用 vue-cli 新建一個項目，並安裝相關依賴

vue init webpack test-electron
cd test-electron
npm install -g cnpm --registry=https://registry.npm.taobao.org //淘寶鏡像
cnpm install electron --save-dev
cnpm install electron-packager --save-dev
其中 electron-packager是打成exe文件的插件。

 

將步驟一中的main.js拷貝到新建項目的build目錄下，並改名爲electron.js。

 

修改electron.js中的路徑

更改config/index.js中生產模式下（build）的assetsPublicPth, 本來爲 /, 改成 ./ 。

步驟三：修改根目錄下的package.json文件

"test": "electron .",

"electron_build": "electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"

 

執行npm run build 打包生成dist目錄

打包完成後，將electron.js 在複製一份到dist目錄下，修改路徑

將package.json 在複製一份到dist目錄下,修改

運行npm test 打開項目 

步驟四：打包爲exe文件

 cnpm install electron-packager-interactive --g    //安裝

 

electron-packager-interactive -g  //可視化打包