偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

一分鐘學(xué)會使用electron將現(xiàn)有vue項(xiàng)目打包為exe桌面端應(yīng)用

開發(fā)
最近有個項(xiàng)目前期是用vue開發(fā)的,開發(fā)完成之后,客戶提了一個新需求,我能不能不在瀏覽器中打開呢?能不能直接在電腦桌面上打開呢?瞬間腦瓜子嗡嗡的。

  [[344654]]

 使用electron
本身項(xiàng)目是使用vue-cli開發(fā)的,在使用electron之前,需要先將開發(fā)好的vue的項(xiàng)目打包生成打包之后的html文件及其他靜態(tài)資源文件。然后就可以直接拿官方demo進(jìn)行打包了。

克隆官方demo

  1. git clone https://github.com/electron/electron-quick-start 

啟動項(xiàng)目

  1. cd electron-quick-start->npm install->npm start   到這就能運(yùn)行demo了 

效果圖如下:

放入自己項(xiàng)目
將自己項(xiàng)目打包好的dist文件中的index.html和其他文件放入electron-quick-start(根目錄)文件夾中,重新start一下,運(yùn)行結(jié)果如圖

這樣一個現(xiàn)有的vue項(xiàng)目就已經(jīng)集成到了electron中。

打包生成exe文件
項(xiàng)目集成到了electron中,下一步就是打包生成我們需要的桌面端exe文件。

安裝插件

  1. npm install electron-packager --save-dev 

添加命令行
在package.json中增加以下代碼命令:

  1. "pack":"electron-packager . testexe --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1" 
  • testexe是打包生成的exe文件名字
  • ./out是輸出路徑
  • app-version=0.0.1 是版本號

打包
運(yùn)行命令打包成功

  1. npm run pack 

打包之后文件結(jié)構(gòu):

雙擊exe文件既可運(yùn)行。

注意在electron中進(jìn)行網(wǎng)絡(luò)請求時,因?yàn)楸旧眄?xiàng)目使用了反向代理,打包后請求路徑前面會增加本地路徑“file:e/”,解決方式:

在項(xiàng)目中添加請求地址全路徑,可以根據(jù)自己需求修改

隱藏菜單欄
electron中默認(rèn)帶有頂部菜單欄,有時候我們的應(yīng)用不需要??梢栽趍ain.js中設(shè)置,隱藏菜單。代碼如下:

  1. // Modules to control application life and create native browser window 
  2. const {app, BrowserWindow,Menu} = require('electron'
  3. const path = require('path'
  4.  
  5. function createWindow () { 
  6.   //隱藏菜單 
  7.   Menu.setApplicationMenu(null
  8.   // Create the browser window. 
  9.   const mainWindow = new BrowserWindow({ 
  10.     width: 800, 
  11.     height: 600, 
  12.     webPreferences: { 
  13.       preload: path.join(__dirname, 'preload.js'
  14.     } 
  15.   }) 
  16.  
  17.   // and load the index.html of the app. 
  18.   mainWindow.loadFile('index.html'
  19.  
  20.   // Open the DevTools. 
  21.   // mainWindow.webContents.openDevTools() 

這樣默認(rèn)的菜單欄就隱藏了,下面提供一些常用的配置項(xiàng):

  1. 在main.js 當(dāng)中通過配置 BrowserWindow 來改變外觀 
  2.  
  3. width Integer - 窗口寬度,單位像素. 默認(rèn)是 800 . 
  4.  
  5. height Integer - 窗口高度,單位像素. 默認(rèn)是 600 . 
  6.  
  7. Integer - 窗口相對于屏幕的左偏移位置.默認(rèn)居中. y Integer - 窗口相對于屏幕的頂部偏移位置.默認(rèn)居中. useContentSize Boolean - width 和 height 使用web網(wǎng)頁size, 這意味著實(shí)際窗口的size應(yīng)該包括窗口框架的 size,稍微會大一點(diǎn),默認(rèn)為 false . center 
  8.  
  9. Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度,默認(rèn)為 0 . 
  10.  
  11. minHeight Integer - 窗口最小高度,默認(rèn)為 0 . 
  12.  
  13. maxWidth Integer - 窗口最大寬度,默認(rèn)無限制. 
  14.  
  15. maxHeight Integer - 窗口最大高度,默認(rèn)無限制. 
  16.  
  17. resizable Boolean - 是否可以改變窗口size,默認(rèn)為 true . 
  18.  
  19. movable Boolean - 窗口是否可以拖動. 在 Linux 上無效. 默認(rèn)為 true . 
  20.  
  21. minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無效. 默認(rèn)為 true . 
  22.  
  23. maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無效. 默認(rèn)為 true . 
  24.  
  25. closable Boolean - 窗口是否可以關(guān)閉. 在 Linux上無效. 默認(rèn)為 true . 
  26.  
  27. alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無效. 默認(rèn)為 false . 
  28.  
  29. fullscreen Boolean - 窗口是否可以全屏幕. 當(dāng)明確設(shè)置值為When false ,全屏化按鈕將會隱藏,在 macOS 將禁用. 默認(rèn) false . 
  30.  
  31. fullscreenable Boolean - 在 macOS 上,全屏化按鈕是否可用,默認(rèn)為 true . skipTaskbar Boolean - 是否在任務(wù)欄中顯示窗口. 默認(rèn)是 false . 
  32.  
  33. kiosk Boolean - kiosk 方式. 默認(rèn)為 false . title String - 窗口默認(rèn)title. 默認(rèn) "Electron" . 
  34.  
  35. icon NativeImage - 窗口圖標(biāo), 如果不設(shè)置,窗口將使用可用的默認(rèn)圖標(biāo). 
  36.  
  37. show Boolean - 窗口創(chuàng)建的時候是否顯示. 默認(rèn)為 true . 
  38.  
  39. frame Boolean - 指定 false 來創(chuàng)建一個 Frameless Window. 默認(rèn)為 true . 
  40.  
  41. acceptFirstMouse Boolean - 是否允許單擊web view來激活窗口 . 默認(rèn)為 false . 
  42.  
  43. disableAutoHideCursor Boolean - 當(dāng) typing 時是否隱藏鼠標(biāo).默認(rèn) false . 
  44.  
  45. autoHideMenuBar Boolean - 除非點(diǎn)擊 Alt ,否則隱藏菜單欄.默認(rèn)為 false . 
  46.  
  47. enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大于屏幕. 默認(rèn)是 false . 
  48.  
  49. backgroundColor String -窗口的 background color 值為十六進(jìn)制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認(rèn)為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明). 
  50.  
  51. hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認(rèn)為 true . 
  52.  
  53. darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環(huán)境上有效. 默認(rèn)為 false . 
  54.  
  55. transparent Boolean - 窗口 透明. 默認(rèn)為 false . 
  56.  
  57. type String - 窗口type, 默認(rèn)普通窗口. 下面查看更多. titleBarStyle String - 窗口標(biāo)題欄樣式. 下面查看更多. 
  58.  
  59. webPreferences Object - 設(shè)置界面特性. 下面查看更多. 

 

 

 

責(zé)任編輯:姜華 來源: 猴哥說前端
相關(guān)推薦

2019-02-28 15:04:36

顯卡兼容芯片

2017-03-30 19:28:26

HBase分布式數(shù)據(jù)

2017-07-06 08:12:02

索引查詢SQL

2020-05-21 19:46:19

區(qū)塊鏈數(shù)字貨幣比特幣

2018-06-26 05:23:19

線程安全函數(shù)代碼

2022-07-18 06:16:07

單點(diǎn)登錄系統(tǒng)

2017-02-21 13:00:27

LoadAverage負(fù)載Load

2018-07-31 16:10:51

Redo Undo數(shù)據(jù)庫數(shù)據(jù)

2011-02-21 17:48:35

vsFTPd

2018-12-12 22:51:24

Java包裝語言

2020-07-17 07:44:25

云計(jì)算邊緣計(jì)算IT

2016-09-12 17:28:45

云存儲應(yīng)用軟件存儲設(shè)備

2020-07-09 07:37:06

數(shù)據(jù)庫Redis工具

2009-11-25 09:26:39

VS2003代碼

2021-09-28 14:02:19

電腦主板黑屏

2025-04-18 08:47:22

2020-06-11 08:04:12

WDMDWDMMWDM

2013-11-15 07:24:50

4G LTE圖解

2016-12-16 11:05:00

分布式互斥線程

2018-03-27 09:28:33

緩存策略系統(tǒng)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號