將現有vue項目基於electron打包成桌面應用程序

1、前言

　　項目原本打算採用B/S架構去作的，只是在"人羣中多看了你一眼"。

2、使用electron集成桌面應用

　　自己項目是使用vue-cli開發的，在使用electron以前，須要將自己的項目打包好後打開index.html能顯示網頁.由於剛接觸便直接拿官方demo進行打包了.

　　1.克隆官方demo：git clone https://github.com/electron/electron-quick-start

　　2.cd electron-quick-start->npm install->npm start   到這就能運行demo了

　　3.將本身項目打包好的dist文件中的index.html和static文件放入electron-quick-start（跟目錄）文件中，從新start一下，運行結果如圖

4.在package.json中增長以下代碼

"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"

運行npm run pack 打包成功 

文件結構

 

 

5.在electron中進行網絡請求時需注意，由於自己項目使用了反向代理，打包後請求路徑前面會增長本地路徑「file:e/」，解決方式：

　　在config-dev.env.js(測試環境)和pro-env.js(正式環境)添加API_ROOT:'192.168.0.0:8080'（根據本身的須要修改）

新建一個js文件導出process.env.API_ROOT;

 最後在main.js中引用

請求路徑前加上this.root

 

至此一個桌面應用已經打包完成