建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一分鐘學會使用electron將現(xiàn)有vue項目打包為exe桌面端應用
使用electron
本身項目是使用vue-cli開發(fā)的，在使用electron之前，需要先將開發(fā)好的vue的項目打包生成打包之后的html文件及其他靜態(tài)資源文件。然后就可以直接拿官方demo進行打包了。
克隆官方demo
- git clone https://github.com/electron/electron-quick-start
啟動項目
- cd electron-quick-start->npm install->npm start 到這就能運行demo了
效果圖如下：
放入自己項目
將自己項目打包好的dist文件中的index.html和其他文件放入electron-quick-start（根目錄）文件夾中，重新start一下，運行結(jié)果如圖
這樣一個現(xiàn)有的vue項目就已經(jīng)集成到了electron中。
打包生成exe文件
項目集成到了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 是版本號
打包
運行命令打包成功
- npm run pack
打包之后文件結(jié)構(gòu)：
雙擊exe文件既可運行。
注意在electron中進行網(wǎng)絡請求時，因為本身項目使用了反向代理，打包后請求路徑前面會增加本地路徑“file:e/”，解決方式：
在項目中添加請求地址全路徑，可以根據(jù)自己需求修改
隱藏菜單欄
electron中默認帶有頂部菜單欄，有時候我們的應用不需要?？梢栽趍ain.js中設置，隱藏菜單。代碼如下：
- // 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()
- }
這樣默認的菜單欄就隱藏了，下面提供一些常用的配置項：
- 在main.js 當中通過配置 BrowserWindow 來改變外觀
- width Integer - 窗口寬度,單位像素. 默認是 800 .
- height Integer - 窗口高度,單位像素. 默認是 600 .
- x Integer - 窗口相對于屏幕的左偏移位置.默認居中. y Integer - 窗口相對于屏幕的頂部偏移位置.默認居中. useContentSize Boolean - width 和 height 使用web網(wǎng)頁size, 這意味著實際窗口的size應該包括窗口框架的 size，稍微會大一點，默認為 false . center
- Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度，默認為 0 .
- minHeight Integer - 窗口最小高度，默認為 0 .
- maxWidth Integer - 窗口最大寬度，默認無限制.
- maxHeight Integer - 窗口最大高度，默認無限制.
- resizable Boolean - 是否可以改變窗口size，默認為 true .
- movable Boolean - 窗口是否可以拖動. 在 Linux 上無效. 默認為 true .
- minimizable Boolean - 窗口是否可以最小化. 在 Linux 上無效. 默認為 true .
- maximizable Boolean - 窗口是否可以最大化. 在 Linux 上無效. 默認為 true .
- closable Boolean - 窗口是否可以關(guān)閉. 在 Linux上無效. 默認為 true .
- alwaysOnTop Boolean - 窗口是否總是顯示在其他窗口之前. 在 Linux上無效. 默認為 false .
- fullscreen Boolean - 窗口是否可以全屏幕. 當明確設置值為When false ，全屏化按鈕將會隱藏，在 macOS 將禁用. 默認 false .
- fullscreenable Boolean - 在 macOS 上，全屏化按鈕是否可用，默認為 true . skipTaskbar Boolean - 是否在任務欄中顯示窗口. 默認是 false .
- kiosk Boolean - kiosk 方式. 默認為 false . title String - 窗口默認title. 默認 "Electron" .
- icon NativeImage - 窗口圖標, 如果不設置，窗口將使用可用的默認圖標.
- show Boolean - 窗口創(chuàng)建的時候是否顯示. 默認為 true .
- frame Boolean - 指定 false 來創(chuàng)建一個 Frameless Window. 默認為 true .
- acceptFirstMouse Boolean - 是否允許單擊web view來激活窗口 . 默認為 false .
- disableAutoHideCursor Boolean - 當 typing 時是否隱藏鼠標.默認 false .
- autoHideMenuBar Boolean - 除非點擊 Alt ，否則隱藏菜單欄.默認為 false .
- enableLargerThanScreen Boolean - 是否允許允許改變窗口大小大于屏幕. 默認是 false .
- backgroundColor String -窗口的 background color 值為十六進制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認為在 Linux和 Windows 上為 #000 (黑色) , Mac上為 #FFF (或透明).
- hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認為 true .
- darkTheme Boolean - 為窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環(huán)境上有效. 默認為 false .
- transparent Boolean - 窗口 透明. 默認為 false .
- type String - 窗口type, 默認普通窗口. 下面查看更多. titleBarStyle String - 窗口標題欄樣式. 下面查看更多.
- webPreferences Object - 設置界面特性. 下面查看更多.
網(wǎng)站題目：一分鐘學會使用electron將現(xiàn)有vue項目打包為exe桌面端應用
當前路徑：http://www.dlmjj.cn/article/dhdgeep.html
