electron electron-builder 打包exe 排除文件

排除文件,不会压缩进 app.asar 的资源,但是会出现在resources/app.asar.unpacked文件夹下

"win":{
        "target": [{
            "target":"nsis"
        }],
        "icon":"build/favicon.ico",
        "asarUnpack":[
            "src/**",
            "README.md"
        ]
    },

如果不想文件出现在 resources/app.asar.unpacked,还可以排除打包,这样就不会被打包进程序

{
  "build": {
    "files": [
      "src/**",
      "README.md"
    ],
  }
}

如果还行复制资源到安装包中,可以这样配置:

{
  //其他内容省略
  “build”:{
    //打包时复制项目目录下的res中文文件到 打包后的exe所在目录的res文件夹中,文件夹下没有文件的话不会复制
    "extraResources": [{
      "from": "./res/",
      //默认打包到resources目录下  所以这里使用了../
      // "to": "res" 则是复制到 resources/res 目录下
      "to": "../res"  
    },{
      "from": "./zz",
      "to": "zz"
    }]
  }
}

electron-builder中两个常用的配置选项extraResources(拷贝资源到打包目录Resources中)、extraFiles(拷贝资源到打包目录的根路径), 详细文档 帮助我们轻松实现增量更新。 

参考链接:

electron 打包时文件复制到程序目录下 - 荣超 - 博客园

electron-builder 打包项目并生成安装包的方法 | 梓喵出没

Electron客户端场景化更新升级方案实践 - 知乎

好的,下面是基于 React 和 Electron 并使用 electron-builder 进行打包的教程: 1. 创建 React 应用 首先,我们需要使用 create-react-app 工具创建一个 React 应用。在命令行中运行以下命令: ``` npx create-react-app my-electron-app ``` 这会在当前目录下创建一个名为 `my-electron-app` 的新应用。 2. 添加 Electron 接下来,我们需要在项目中添加 Electron。我们可以使用 `electron` 和 `electron-builder` 库来实现这一点。 在命令行中运行以下命令: ``` cd my-electron-app npm install --save-dev electron electron-builder ``` 3. 添加 Electron 入口文件 我们需要创建一个新文件 `public/electron.js`,这是 Electron 的入口文件。在这个文件中,我们需要引入 `electron` 模块并创建一个新的 Electron 窗口。 ```js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 这个文件创建了一个新的 Electron 窗口,并在窗口中加载了 React 应用的 `http://localhost:3000` 页面。 4. 修改 package.json 文件 我们需要修改 `package.json` 文件中的一些字段,以便 electron-builder 能够正确地打包我们的应用。 ```json { "name": "my-electron-app", "version": "0.1.0", "homepage": "./", "main": "public/electron.js", "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "build" }, "files": [ "build/**/*", "node_modules/**/*", "public/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "public/icon.icns" }, "win": { "icon": "public/icon.ico" } } } ``` 这个文件中的 `main` 字段告诉 electron-builder 我们的 Electron 入口文件在 `public/electron.js`。`build` 字段中的其他字段指定了打包的一些设置,例如应用的 ID、名称、输出目录、文件列表和图标。 5. 添加打包脚本 最后,我们需要在 `package.json` 文件中添加一个打包脚本。 ```json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "pack": "electron-builder --dir", "dist": "electron-builder" } } ``` 这些脚本中的 `pack` 脚本会在开发模式下打包应用程序,而 `dist` 脚本会在生产模式下打包应用程序。 6. 运行应用 现在,我们可以运行应用程序。在命令行中运行以下命令: ``` npm start ``` 这将启动 React 应用程序。 然后,在另一个命令行窗口中运行以下命令: ``` npm run pack ``` 这将使用 `electron-builder` 打包应用程序,并在输出目录中生成一个可执行文件。 如果您想要构建一个安装程序,您可以运行以下命令: ``` npm run dist ``` 这将打包应用程序,并在输出目录中生成一个安装程序。 这就是使用 React 和 Electron 并使用 electron-builder 进行打包的教程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值