electron打包dist为可执行程序的实现步骤
作者:Williamoses
前言
甲方爹:BS=>CS?
我方领导:OJBK。
项目是普普通通的vue项目,要求封装成arm64的Linux可执行程序。
提示:以下是本篇文章正文内容,下面案例可供参考
一、直接看效果
二、实现步骤
1.准备dist文件夹
publicPath得是./,不然打包出来的dist跑起来是空白的,双击index.html能在浏览器中看到页面。
2.修改接口映射
接口请求映射关系修改,如果不修改映射关系,接口请求会变成通过file:///协议访问。我看有的人说把项目里面的接口都替换写死,wo...
修改一下.env.production
生产环境配置文件中VUE_APP_BASE_API的值为你的生产环境要访问的接口就行,格式为:http://ip地址:端口号。这里是vue.config.js的proxy和request.js的请求配置的变量配置。
3.NVM管理node版本
项目框架比较成熟,electron-quick-start比较新,中间遇到版本不兼容,一个16一个20。所以需要用NVM管理node版本,执行构建命令的时候切一下。
注意:通过NVM install的node不能直接切,需要把之前安装的node卸载了并且删除类似npmrc这样的文件或者文件夹,网上一搜一大把的说明文档。
4.准备electron容器并npm run start
下载下来后是这样的。
把前面准备的dist文件夹复制到根目录中来,像下面这样。
修改main.js的load路径。
修改完执行npm run start就能看到打包后的效果了,需要屏蔽操作栏或者默认最大化之类的可以看看官方手册的BrowserWindow配置内容
。
官方手册: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,//是否全屏展示:没有窗口 }) mainWindow.maximize();//窗口最大化展示 // and load the index.html of the app. mainWindow.loadFile('./dist/index.html') Menu.setApplicationMenu(null);//去掉默认的操作栏 // Open the DevTools.开发者工具是否打开 // 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.封装成可执行程序
5.1.手动下载electron对应版本的zip文件,解决打包缓慢问题
下载地址:electron zip文件
新建cache文件夹,把压缩包放进去,如下。
5.2.安装packager
npm install electron-packager
5.3.配置打包命令执行内容
"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方法,替换为下面代码块的内容。
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.执行打包命令
npm run packager:linux-arm64
总结
以上就是electron打包dist为可执行程序的实现步骤的详细内容,更多关于electron打包dist的资料请关注脚本之家其它相关文章!