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


一、前言

  項目本來打算采用B/S架構去做的,只是在"人群中多看了你一眼"

二、使用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

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM