国产麒麟系统下打包electron+vue项目(AppImage、deb)

需要用到的一些依赖包、安装包以及更详细的打包方法word以及麒麟官网给出的文档都已放网盘,链接在文章最后!!!!!!!!!!!!!!!!!!

搭建开发环境可参考之前文章:银河麒麟v10安装前端环境(Node、vue、Electron+vite)_麒麟系统安装nodejs-CSDN博客

一.将项目打包成两种格式的包

第一种Appimage包(这种包比较简单没太多环境配置),下面是对此包的解释

1.相关代码配置:

在package.json中打包相关配置,icon必须设置否则打包会报错

  "build": {
    "appId": "com.electron.desktop",
    "productName": "xxx",
    "asar": false,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist"
    ],
    "linux": {
      "icon": "xxx",
      "category": "System",
      "target": [
        {
          "target": "AppImage",
          "arch": [
            "arm64"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMach
要使用Electron打包Vue2项目,需要使用以下步骤: 1. 安装ElectronElectron Builder: ``` npm install electron electron-builder --save-dev ``` 2. 在package.json文件中添加以下内容: ``` "build": { "productName": "YourAppName", "appId": "com.yourcompany.yourapp", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "node_modules/**/*", "main.js" ], "extraResources": [ { "from": "src/assets", "to": "assets", "filter": [ "**/*" ] } ], "mac": { "category": "your.app.category", "icon": "build/icon.icns" }, "win": { "target": "nsis", "icon": "build/icon.ico" }, "linux": { "category": "your.app.category", "icon": "build/icon.png", "target": [ "AppImage", "deb" ] } } ``` 这个配置文件告诉Electron Builder如何打包你的应用程序,包括产品名称、应用程序ID、输出目录、需要打包的文件、额外的资源和操作系统特定的设置。 3. 创建一个入口文件main.js,该文件负责启动Vue应用程序和Electron: ``` const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url') let win function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })) win.on('closed', () => { win = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (win === null) { createWindow() } }) ``` 这个文件创建一个Electron窗口,并将Vue应用程序加载到窗口中。 4. 运行以下命令,将Vue应用程序构建到dist目录中: ``` npm run build ``` 5. 运行以下命令,以将Vue应用程序打包Electron应用程序: ``` npm run electron:build ``` 这将生成一个可执行文件,可以在操作系统上运行你的Electron应用程序。 希望这些步骤可以帮助你打包Vue2项目
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_63701303

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值