electron打包dist为可执行程序的实现步骤

 更新时间:2024年04月22日 10:25:05   作者:Williamoses  
这篇文章主要介绍了electron打包dist为可执行程序的实现步骤,文中通过代码示例和图文讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

前言

甲方爹: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

下载:electron-quick-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的资料请关注脚本之家其它相关文章!

相关文章

  • eslint 的三大通用规则详解

    eslint 的三大通用规则详解

    这篇文章主要介绍了eslint 的三大通用规则详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JavaScript canvas 实现用代码画画

    JavaScript canvas 实现用代码画画

    这篇文章主要为大家介绍了JavaScript canvas 实现用代码画画示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    这篇文章主要给大家介绍了关于微信小程序组件生命周期的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 微信小程序获取头像和昵称的最新方法(直接用!)

    微信小程序获取头像和昵称的最新方法(直接用!)

    微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了,下面这篇文章主要给大家介绍了关于微信小程序获取头像和昵称的最新方法,本文介绍的方法可以直接拿来用,需要的朋友可以参考下
    2023-05-05
  • javascript 密码强弱度检测万能插件

    javascript 密码强弱度检测万能插件

    网上用的比较多的一种用来检测用户输入密码的强度检测,其实就是把一些常用的拼音,英文单词, 纯数字,纯字母等。
    2009-02-02
  • JavaScript 实现文件跳转方法示例详解

    JavaScript 实现文件跳转方法示例详解

    JavaScript页面跳转方法包括window.location、超链接、meta标签、history API和表单提交,需区分相对路径与绝对路径,单页应用推荐使用路由库(如React Router),选择方式应结合需求与项目架构,本文给大家介绍JavaScript 文件跳转方法,感兴趣的朋友一起看看吧
    2025-08-08
  • JavaScript实现表格表单的随机选择和简单的随机点名

    JavaScript实现表格表单的随机选择和简单的随机点名

    本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • javascript:json数据的页面绑定示例代码

    javascript:json数据的页面绑定示例代码

    本篇文章主要是对javascript:json数据的页面绑定示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS题解leetcode去掉最低工资和最高工资后的工资平均值

    JS题解leetcode去掉最低工资和最高工资后的工资平均值

    这篇文章主要为大家介绍了JS题解leetcode去掉最低工资和最高工资后的工资平均值,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • js计时事件实现圆形时钟

    js计时事件实现圆形时钟

    这篇文章主要为大家详细介绍了js计时事件实现圆形时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论