electron打包dist為可執(zhí)行程序的實(shí)現(xiàn)步驟
前言
甲方爹:BS=>CS?
我方領(lǐng)導(dǎo):OJBK。
項(xiàng)目是普普通通的vue項(xiàng)目,要求封裝成arm64的Linux可執(zhí)行程序。
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、直接看效果
二、實(shí)現(xiàn)步驟
1.準(zhǔn)備dist文件夾
publicPath得是./,不然打包出來(lái)的dist跑起來(lái)是空白的,雙擊index.html能在瀏覽器中看到頁(yè)面。
2.修改接口映射
接口請(qǐng)求映射關(guān)系修改,如果不修改映射關(guān)系,接口請(qǐng)求會(huì)變成通過(guò)file:///協(xié)議訪(fǎng)問(wèn)。我看有的人說(shuō)把項(xiàng)目里面的接口都替換寫(xiě)死,wo...
修改一下.env.production
生產(chǎn)環(huán)境配置文件中VUE_APP_BASE_API的值為你的生產(chǎn)環(huán)境要訪(fǎng)問(wèn)的接口就行,格式為:http://ip地址:端口號(hào)。這里是vue.config.js的proxy和request.js的請(qǐng)求配置的變量配置。
3.NVM管理node版本
項(xiàng)目框架比較成熟,electron-quick-start比較新,中間遇到版本不兼容,一個(gè)16一個(gè)20。所以需要用NVM管理node版本,執(zhí)行構(gòu)建命令的時(shí)候切一下。
注意:通過(guò)NVM install的node不能直接切,需要把之前安裝的node卸載了并且刪除類(lèi)似npmrc這樣的文件或者文件夾,網(wǎng)上一搜一大把的說(shuō)明文檔。
4.準(zhǔn)備electron容器并npm run start
下載下來(lái)后是這樣的。
把前面準(zhǔn)備的dist文件夾復(fù)制到根目錄中來(lái),像下面這樣。
修改main.js的load路徑。
修改完執(zhí)行npm run start就能看到打包后的效果了,需要屏蔽操作欄或者默認(rèn)最大化之類(lèi)的可以看看官方手冊(cè)的BrowserWindow配置內(nèi)容
。
官方手冊(cè):BrowserWindow
下面貼一下我自己的。
// Modules to control application life and create native browser window const { app, BrowserWindow,Menu } = require('electron') const path = require('node:path') function createWindow () { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') }, minimizable: false,//窗口是否可最小化 fullscreen: false,//是否全屏展示:沒(méi)有窗口 }) mainWindow.maximize();//窗口最大化展示 // and load the index.html of the app. mainWindow.loadFile('./dist/index.html') Menu.setApplicationMenu(null);//去掉默認(rèn)的操作欄 // Open the DevTools.開(kāi)發(fā)者工具是否打開(kāi) // mainWindow.webContents.openDevTools() } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() => { createWindow() app.on('activate', function () { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
5.封裝成可執(zhí)行程序
5.1.手動(dòng)下載electron對(duì)應(yīng)版本的zip文件,解決打包緩慢問(wèn)題
下載地址:electron zip文件
新建cache文件夾,把壓縮包放進(jìn)去,如下。
5.2.安裝packager
npm install electron-packager
5.3.配置打包命令執(zhí)行內(nèi)容
"scripts": { "packager:win": "electron-packager ./ winApp --platform=win32 --arch=x64 --overwrite --no-prune --ignore=/node_modules", "packager:linux-x64": "electron-packager ./ linuxApp --platform=linux --arch=x64 --overwrite --no-prune --ignore=/node_modules", "packager:linux-arm64": "electron-packager ./ linuxApp --platform=linux --arch=arm64 --overwrite --no-prune --ignore=/node_modules" },
5.4.修改electron-packager源碼
找到electron-packager的src文件夾下面的index.js搜一下packageForPlatformAndArchWithOpts方法,替換為下面代碼塊的內(nèi)容。
async packageForPlatformAndArchWithOpts (comboOpts, downloadOpts) { // const zipPath = await this.getElectronZipPath(downloadOpts) --- const arch = downloadOpts.arch // +++ const zipPath = arch === 'arm64' ? './cache/electron-v22.0.0-linux-arm64.zip' : './cache/electron-v22.0.0-linux-x64.zip' // +++ if (!this.useTempDir) { return this.createApp(comboOpts, zipPath) } if (common.isPlatformMac(comboOpts.platform)) { /* istanbul ignore else */ if (this.canCreateSymlinks === undefined) { return this.testSymlink(comboOpts, zipPath) } else if (!this.canCreateSymlinks) { return this.skipHostPlatformSansSymlinkSupport(comboOpts) } } return this.checkOverwrite(comboOpts, zipPath) }
替換:
5.5.執(zhí)行打包命令
npm run packager:linux-arm64
總結(jié)
以上就是electron打包dist為可執(zhí)行程序的實(shí)現(xiàn)步驟的詳細(xì)內(nèi)容,更多關(guān)于electron打包dist的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
這篇文章主要給大家介紹了關(guān)于如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-0124個(gè)實(shí)用JavaScript?開(kāi)發(fā)技巧
這篇文章主要給大家分享了24個(gè)實(shí)用JavaScript?的開(kāi)發(fā)技巧,文章圍繞JavaScript?的開(kāi)發(fā)技巧講解展開(kāi)全文,具有一定的參考價(jià)值,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-12-12LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式學(xué)習(xí)之代理模式,對(duì)設(shè)計(jì)模式感興趣的同學(xué),可以參考下2021-04-04JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JavaScript錯(cuò)誤處理機(jī)制全面分析講解
下面小編就為大家?guī)?lái)一篇全面了解javascript中的錯(cuò)誤處理機(jī)制。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2022-10-10JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題
這篇文章主要介紹了JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-02-02JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10layui之select的option疊加問(wèn)題的解決方法
下面小編就為大家分享一篇layui之select的option疊加問(wèn)題的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03