建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
一分鐘學(xué)會(huì)使用electron將現(xiàn)有vue項(xiàng)目打包為exe桌面端應(yīng)用
使用electron
本身項(xiàng)目是使用vue-cli開(kāi)發(fā)的，在使用electron之前，需要先將開(kāi)發(fā)好的vue的項(xiàng)目打包生成打包之后的html文件及其他靜態(tài)資源文件。然后就可以直接拿官方demo進(jìn)行打包了。
克隆官方demo
- git clone https://github.com/electron/electron-quick-start
啟動(dòng)項(xiàng)目
- 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é)果如圖
這樣一個(gè)現(xiàn)有的vue項(xiàng)目就已經(jīng)集成到了electron中。
打包生成exe文件
項(xiàng)目集成到了electron中，下一步就是打包生成我們需要的桌面端exe文件。
安裝插件
- npm install electron-packager --save-dev
添加命令行
在package.json中增加以下代碼命令：
- "pack":"electron-packager . testexe --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1"
- testexe是打包生成的exe文件名字
- ./out是輸出路徑
- app-version=0.0.1 是版本號(hào)
打包
運(yùn)行命令打包成功
- npm run pack
打包之后文件結(jié)構(gòu)：
雙擊exe文件既可運(yùn)行。
注意在electron中進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)，因?yàn)楸旧眄?xiàng)目使用了反向代理，打包后請(qǐng)求路徑前面會(huì)增加本地路徑“file:e/”，解決方式：
在項(xiàng)目中添加請(qǐng)求地址全路徑，可以根據(jù)自己需求修改
隱藏菜單欄
electron中默認(rèn)帶有頂部菜單欄，有時(shí)候我們的應(yīng)用不需要。可以在main.js中設(shè)置，隱藏菜單。代碼如下：
- // Modules to control application life and create native browser window
- const {app, BrowserWindow,Menu} = require('electron')
- const path = require('path')
- function createWindow () {
- //隱藏菜單
- Menu.setApplicationMenu(null)
- // Create the browser window.
- const mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- preload: path.join(__dirname, 'preload.js')
- }
- })
- // and load the index.html of the app.
- mainWindow.loadFile('index.html')
- // Open the DevTools.
- // mainWindow.webContents.openDevTools()
- }
這樣默認(rèn)的菜單欄就隱藏了，下面提供一些常用的配置項(xiàng)：
- 在main.js 當(dāng)中通過(guò)配置 BrowserWindow 來(lái)改變外觀
- width Integer - 窗口寬度,單位像素. 默認(rèn)是 800 .
- height Integer - 窗口高度,單位像素. 默認(rèn)是 600 .
- x Integer - 窗口相對(duì)于屏幕的左偏移位置.默認(rèn)居中. y Integer - 窗口相對(duì)于屏幕的頂部偏移位置.默認(rèn)居中. useContentSize Boolean - width 和 height 使用web網(wǎng)頁(yè)size, 這意味著實(shí)際窗口的size應(yīng)該包括窗口框架的 size，稍微會(huì)大一點(diǎn)，默認(rèn)為 false . center
- Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度，默認(rèn)為 0 .
- minHeight Integer - 窗口最小高度，默認(rèn)為 0 .
- maxWidth Integer - 窗口最大寬度，默認(rèn)無(wú)限制.
- maxHeight Integer - 窗口最大高度，默認(rèn)無(wú)限制.
- resizable Boolean - 是否可以改變窗口size，默認(rèn)為 true .
- movable Boolean - 窗口是否可以拖動(dòng). 在 Linux 上無(wú)效. 默認(rèn)為 true .
- minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無(wú)效. 默認(rèn)為 true .
- maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無(wú)效. 默認(rèn)為 true .
- closable Boolean - 窗口是否可以關(guān)閉. 在 Linux上無(wú)效. 默認(rèn)為 true .
- alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無(wú)效. 默認(rèn)為 false .
- fullscreen Boolean - 窗口是否可以全屏幕. 當(dāng)明確設(shè)置值為When false ，全屏化按鈕將會(huì)隱藏，在 macOS 將禁用. 默認(rèn) false .
- fullscreenable Boolean - 在 macOS 上，全屏化按鈕是否可用，默認(rèn)為 true . skipTaskbar Boolean - 是否在任務(wù)欄中顯示窗口. 默認(rèn)是 false .
- kiosk Boolean - kiosk 方式. 默認(rèn)為 false . title String - 窗口默認(rèn)title. 默認(rèn) "Electron" .
- icon NativeImage - 窗口圖標(biāo), 如果不設(shè)置，窗口將使用可用的默認(rèn)圖標(biāo).
- show Boolean - 窗口創(chuàng)建的時(shí)候是否顯示. 默認(rèn)為 true .
- frame Boolean - 指定 false 來(lái)創(chuàng)建一個(gè) Frameless Window. 默認(rèn)為 true .
- acceptFirstMouse Boolean - 是否允許單擊web view來(lái)激活窗口 . 默認(rèn)為 false .
- disableAutoHideCursor Boolean - 當(dāng) typing 時(shí)是否隱藏鼠標(biāo).默認(rèn) false .
- autoHideMenuBar Boolean - 除非點(diǎn)擊 Alt ，否則隱藏菜單欄.默認(rèn)為 false .
- enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大于屏幕. 默認(rèn)是 false .
- backgroundColor String -窗口的 background color 值為十六進(jìn)制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認(rèn)為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明).
- hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認(rèn)為 true .
- darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環(huán)境上有效. 默認(rèn)為 false .
- transparent Boolean - 窗口 透明. 默認(rèn)為 false .
- type String - 窗口type, 默認(rèn)普通窗口. 下面查看更多. titleBarStyle String - 窗口標(biāo)題欄樣式. 下面查看更多.
- webPreferences Object - 設(shè)置界面特性. 下面查看更多.
當(dāng)前題目：一分鐘學(xué)會(huì)使用electron將現(xiàn)有vue項(xiàng)目打包為exe桌面端應(yīng)用
文章位置：http://www.5511xx.com/article/dhdgeep.html
