【Electron-vue】构建桌面应用(5)-Linux下打包安装程序deb文件

1.前言

在上一篇博客中讲到交叉打包的问题,但是很遗憾的是,目前做不到。

  • 在window下打包的可执行程序,无法在Linux下执行,并且会出现core dumped的问题,目前无法解决
  • 在Linux下可以通过build生成windows下的可执行程序,并且在windows下可执行,而且在windows下通过Inno Setup打包生成可安装程序
  • 那接下来就是调研怎么在Linux系统中生成可执行程序。

2.Linux下生成可执行程序

2.1.准备工作

因为VS code9(以下简称VS)开发工具就是使用electron开发的,所以就在官网看了一下安装VS的安装程序。

的安装包,接下来就需要调研在Linux下怎么生成.deb安装包从上图可以看出在Linux系统下有两种安装包,也就是说后期为了支持不同的Linux系统,还需要生成不同的安装包,这个还待研究。由于我安装的Ubunt,所以就拿Ubunt来做实验。所以我是用的也是.deb格式以及怎么安装。

  • Ubunt,Debian系统中使用.deb格式的安装包
  • Red Hat,Fedora,SUSE系统下使用的.rpm安装包

2.2.生成.deb文件

2.2.1 创建文件夹

可以在任意目录下创建新的文件夹,有人喜欢在usr目录下,我是在桌面创建了一个soft文件夹,然后把我的的项目按照不同的文件去划分。

### 如何使用 ElectronVue 构建桌面应用程序商店 #### 创建项目 为了创建基于 ElectronVue桌面应用程序商店,可以按照如下方法初始化项目: 安装 `vue-cli` 并通过插件来扩展功能是一个便捷的方式。如果使用的 web 应用程序是由 Vue CLI 3 构建而成,则可以通过 Vue CLI 插件 Electron Builder 来简化将其转换为桌面应用程序的过程[^1]。 ```bash vue create my-electron-app-store cd my-electron-app-store vue add electron-builder ``` 这会自动配置好必要的依赖项并设置基本的入口文件用于启动 Electron 应用程序。 #### 配置项目结构 典型的 Electron- `/public`: 放置静态资产的地方。 - `/src`: 存放 Vue 组件和其他源码的位置。 - `/background.js`: 定义主进程逻辑,在这里处理与操作系统交互的任务。 - `/main.js`: 启动渲染进程的应用入口点。 - `/package.json`: 列出了所有的 npm 脚本和依赖关系。 #### 开发应用商店界面 在构建实际的应用商店之前,先设计一个简单的用户界面 (UI),该 UI 将展示可用的应用列表,并允许用户点击下载或打开已安装的应用。这部分主要由 Vue 组件构成,负责呈现数据并与用户的操作互动。 可以在 `App.vue` 中定义基础模板,并引入其他组件以显示不同的页面视图。例如,有一个名为 `AppList.vue` 的组件专门用来列举可获取的应用程序。 ```html <!-- App.vue --> <template> <div id="app"> <!-- 导航栏或其他全局控件 --> <router-view></router-view> <!-- 动态加载不同路由对应的组件 --> </div> </template> <script> export default { name: 'App' } </script> ``` ```html <!-- src/components/AppList.vue --> <template> <ul class="app-list"> <li v-for="(app, index) in apps" :key="index">{{ app.name }}</li> </ul> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { apps: [ // 假设这是从API请求得到的数据 {"name": "Example Application"}, ... ] } }, }); </script> ``` #### 实现发布流程 当完成了开发工作之后,准备将应用程序打包分发给最终用户。借助 `electron-builder` 可以为多个平台生成安装包。确保已经在 `package.json` 文件里指定了合适的 build 设置。 ```json { "build": { "appId": "com.example.electron.appstore", "productName": "Electron App Store", "directories": { "output": "dist" }, "files": [ "**/*", "!node_modules/**/test", "!node_modules/**/tests" ], "mac": { "icon": "./assets/icon.icns" }, "win": { "target": ["nsis"], "icon": "build/icons/icon.ico" }, "linux": { "target": ["deb", "rpm"] } } } ``` 执行下面命令来进行编译和打包: ```bash npm run build && npm run pack ``` 上述指令将会依据所选的目标平台自动生成适合发布的版本。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值