Electron打包vue项目 用户可选择安装目录

已于 2022-12-07 17:11:47 修改
阅读量4.8k 收藏 23
点赞数 6
分类专栏： Electron 文章标签： node.js vue electron 前端
于 2022-12-06 21:29:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V_iolet/article/details/128198302
版权

目录

科普小知识

npm 和 cnpm的不同之处

package.json中 dependencies 和 devDependencies的不同

参数 --save 和 --save-dev的不同

一、NPM安装依赖

以下命令均在项目根目录运行 

cnpm install -g electron

cnpm i electron-packager 第一种方式

 cnpm i electron-builder 第二种方式

说明

二、vue项目打包成dist文件

打包dist文件

以下操作均在dist文件中进行

三、Electron打包桌面端 packager打包

在项目的package.json文件中的"scripts"添加一行代码

最后开始打包

四、Electron打包可选择安装目录的exe builder打包

在项目的package.json文件中的"scripts"添加一行代码

配置package.json

最后开始打包

五、记录报错 一行代码解决

科普小知识

npm 和 cnpm的不同之处

  • npm安装的包是树状结构，层级深，打包速度快
  • cnpm安装的包是扁平化，展开node_modules会有非常多的文件，打包速度慢

package.json中 dependencies 和 devDependencies的不同

  • dependencies 是生产环境，就是软件在正儿八经的场合用到
  • devDependencies 是开发和测试环境，就是日常打代码所用的第三方插件

参数 --save 和 --save-dev的不同

  • --save 是安装在生产环境
  • --save-dev 安装在开发环境
  • 默认安装在生产环境

一、NPM安装依赖

以下命令均在项目根目录运行 

推荐使用npm命令安装，如果npm报错cnpm也可以

electron在打包成exe时，是不允许electron相关的依赖存在生产环境当中的。所以下面命令都选择用 --save-dev 来安装

cnpm install -g electron

electron是打包必备的环境，建议用cmd全局安装。
以后打包好的文件再简单配置一下三个文件均可用electron . 来运行

cnpm install -g electron

cnpm i electron-packager 第一种方式

electron-packager 用来直接打包成桌面端，会直接生成一个安装完成的文件夹

cnpm i electron-packager --save-dev

 cnpm i electron-builder 第二种方式

electron-builder 用来打包成exe安装包，点击可进行安装选择目录

cnpm i electron-builder --save-dev

yarn add electron-builder --save-dev

说明

builder 和 packager 是两种不同的打包方式

两种方式都可以打包成多系统

builder打包完体积会比packager小、轻量化、支持热更新、多平台

二、vue项目打包成dist文件

打包dist文件

npm run build

根目录生成dist文件后
需要克隆github上electron的空架构

git clone https://github.com/electron/electron-quick-start

或者直接github去下载zip

https://github.com/electron/electron-quick-start

以下操作均在dist文件中进行

下载完之后需要把这三个文件放到dist文件中，不需要改动任何内容

  • main.js
  • package.json
  • preload.js

在dist文件中执行命令运行

electron .

屏幕弹出一个框框就说明距离成功已经一大半了，如下。

如果启动后白屏，多半是因为静态资源路径不对，只需要在vue.config.js文件里配置以下静态资源路径就可以。

publicPath: './',

三、Electron打包桌面端 packager打包

在项目的package.json文件中的"scripts"添加一行代码

"electron_build": "electron-packager ./dist/ --win --ia32 --overwrite --icon=你的ico文件路径"

命令参数可参考 electron-packager 命令常用参数大全（含换图标方案）

最后开始打包

npm run electron_build

打包完成之后会提示如下语句

 文件的根目录会生成一个 electron-quick-start-win32-x64 的文件 说明打包完成了

四、Electron打包可选择安装目录的exe builder打包

在项目的package.json文件中的"scripts"添加一行代码

"electron_builder": "electron-builder --win --ia32"

配置package.json

以下是完整的配置，各取所需，使用前取消注释

"build": {
    "productName":"XXX",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.aimooc.xxxxx",//包名  
    "copyright":"xxxx",//版权 信息
    "directories": { // 输出文件夹
      "output": "builder"	// 默认项目根目录下的dist
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",		// 安装图标路径
      "uninstallerIcon": "./build/icons/bbb.ico",	//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, 	// 创建桌面图标
      "createStartMenuShortcut": true,	// 创建开始菜单图标
      "shortcutName": "xxxx", 	// 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本,这个对于构建需求严格得安装过程相当有用。
    },
    // 更新用的配置，主要是为了生成lastest.yaml配置文件
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "./dist/main.js"    // dist文件的入口主文件
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [	// 打出来32 bit + 64 bit的包(这样的安装包体积较大，建议直接打32的包。
          	// "x64", // 一般建议去掉
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

最后开始打包

npm run electron_builder

提示以下说明打包成功

 根目录会多出一个builder文件夹

 打包exe完成 试一试吧！

双击exe安装包

 

 选择安装目录，我们的目的已达成

 运行

成功拉

如果安装完后出现白屏的情况，大多数是因为electron主进程没有读取到index.html文件

是路径的问题，所以把dist文件中main.js里面的

  mainWindow.loadFile('index.html')

 修改成

  mainWindow.loadFile('dist/index.html')

再重新打包一次，问题解决。

五、记录报错 一行代码解决

packager打包报错1

说明缺少依赖直接install  npm不行用cnpm

npm install

packager打包报错2 'electron-packager' is not recognized as an internal or external command,翻译过来就是

 'electron-packager' 不被识别为内部或外部命令，

那就全局安装packager  npm不行用cnpm

npm install -g electron-packager

packager打包报错3

下载超时，需要更换国内镜像

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

更换完国内镜像重新执行打包命令就成功了

小树枝.
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
electron-builder自动修改应用名称和默认安装位置
puyahua的专栏
10-20 8083
electron-builder自动修改应用名称和默认安装位置 先说下做了什么事吧，就是在打包的脚本里先通过cross-env设置几个不同的环境变量，然后在执行electron-builder之前根据模板字符串重新生成打包相关的配置文件。目的是为了打包不同的接口和环境的时候可以自动生成相应的快捷方式名称和默认安装位置，不然的话每次打包还要修改配置文件，当然你说安装位置可以自己去选择，但是我们更期望...
Electron项目中的NSIS配置项
dfdlife的博客
07-14 2908
NSIS脚本配置项
2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享
2401_85015025的博客
05-14 417
择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置 可以根据自己的需求自行配置。7、开始基本配置 主要在。
vue实现文件路径选择
最新发布
qq_52132550的博客
06-08 1326
基于vue实现文件选择，操作目录返回上一级，进入下一级
electron 文件路径选择框
ABC__789的博客
01-12 1757
electron showOpenDialog 弹出文件路径选择框
Electron 分享（入门，安装，打包）
博客简介
12-03 1万+
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
electron-vue 获取本地配置,修改存放目录
banyoyo的博客
03-23 1831
electron-vue 获取本地配置,修改存放目录。
Electron-builder Linux平台打包安装后执行的shell脚本(deb)
微笑的 Java
08-03 3232
1.package.json 文件 build 下的 nsis 和 linux配置 "nsis": { "oneClick": false, "allowElevation": true, "allowToChangeInstallationDirectory": true, "installerIcon": "./build/icons/icon.ico", "uninstallerIcon": "./build/icons/icon.i..
electron集成打包vue项目为桌面exe（若依前后端分离框架）
weixin_45393413的博客
07-25 1589
electron集成打包vue项目为桌面exe（若依前后端分离框架），可用于使用若依前后端分离框架进行的一些系统的electron打包
electron功能实现---添加全局快捷键、开机自启、选择安装路径
weixin_46545002的博客
08-12 4391
electron功能实现---添加全局快捷键、开机自启、选择安装路径
记electron-builder将应用打包成installer安装包
qq_40532145的博客
09-04 2945
记录通过electron-builder将程序打包输出为installer安装包的配置
通过electronbuilder将Electron案例制作成Windows程序以及安装包
08-11
通过electron-builder 将 Electron案例 制作成 Windows程序 以及 安装包
Linux下搭建electron-builder打包环境
热门推荐
李荔的博客
03-28 1万+
本文在deepin15.11，electron@8.0.0， electron-builder@22.3.2环境下编写 1. 全局安装electron-builder npm install -g electron-builder@22.3.2 2. 在package.json文件中增加打包的配置 { "build": { "productName":"Electron_Test...
使用electron打包项目文件
weixin_45498515的博客
05-18 1172
vue项目使用electron打包成exe 首先将自己的vue项目文件 npm run build; 注:(此时要把自己的路由模式强制更改为 mode: ‘hash’,如图) 接下来就是关于electron的内容了 1.首先新建一个和vue项目同层级的文件夹，electron-app,然后在这个文件夹下面git clone https://github.com/electron/electron-quick-start 将electron官方打包例子克隆下来； 2.之后npm run start；
electron的windows环境
vinnie
05-11 796
1.安装nvm-windows https://github.com/coreybutler/nvm-windows 下载安装文件：https://github.com/coreybutler/nvm-windows/releases 默认安装位置：C:\Users\electron\AppData\Roaming\nvm 默认环境变量位置：C:\Program Files\nodejs *安装完成后，虽然path中会自动加入环境变量，但是命令行可能不太好用，需要调整path里面的新加的目录放在最前面 2.
electron 读取文件夹内容_Electron选择文件、文件夹对话框(非原创，传播)
weixin_39534100的博客
12-22 1679
1.第一种方法，纯js代码其原理是：利用input标签的file类别，打开选择文件对话框通过input标签的change事件，将选择的文件返回。为了使每次选择的文件都得到更新，在input对象用完后每次都移除出html中，下次使用时再重新创建并添加到html中。代码如下：/***按钮事件实现函数*原理：利用input标签的file类别，打开选择文件对话框*通过change事件，将选择的文件返回。为...
Win10安装electronjs和打包神器electron-packager
Rudon滨海渔村的博客
01-13 797
步骤 1.安装Node.jsWindows10系统安装npm_Rudon滨海渔村的博客-CSDN博客 2.安装Git bashGit - Downloads 3.安装electronjs和其打包神器electron-packager npm -v npm config set registry http://registry.npm.taobao.org/ // 全局安装electron npm install electron -g // 全局安装打包神器electron-package..
electron打开系统资源管理器（非选择文件）
ZuoZuoDangerou的博客
09-15 2136
打开指定路径文件夹
【Electron】Electron开发入门（四）：操作PC端文件系统
weixin_30485291的博客
09-28 2502
一、调用PC端默认方式打开本地文件 在main.js里 // 打开系统本地文件或者网页链接 const {shell} = require('electron'); // Open a local file in the default app var path1 = "d:\\ProjectsSpace\\ElectronProjects\\ElectronTest...
在已有的vue项目中的给electron应用打包
07-28
对于给已有的 Vue 项目打包成 Electron 应用，你可以按照以下步骤进行操作： 1. 首先，确保你的 Vue 项目已经能够正常运行并且已经安装了 Electron 相关依赖。 2. 在项目根目录下创建一个 `main.js` 文件，这将是 Electron 应用的入口文件。在该文件中，你需要创建一个 Electron 应用窗口并加载 Vue 项目的打包文件。 ```javascript const { app, BrowserWindow } = require('electron'); function createWindow() { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); // 加载 Vue 项目的打包文件 win.loadURL(`file://${__dirname}/dist/index.html`); } 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(); }); ``` 3. 接下来，在 `package.json` 文件中添加一个 `start` 命令，用于启动 Electron 应用。 ```json { "scripts": { "start": "electron ." } } ``` 4. 然后，运行 `npm start` 命令启动 Electron 应用，确保应用能够正常运行。 5. 最后，使用 Electron 打包工具将整个项目打包成可执行文件。常用的打包工具有 `electron-packager` 和 `electron-builder`，你可以根据自己的需求选择其中一个进行使用。 例如，使用 `electron-builder` 进行打包，首先安装该工具： ```bash npm install electron-builder --save-dev ``` 然后在 `package.json` 文件中添加以下配置： ```json { "build": { "appId": "com.example.myapp", "productName": "MyApp", "directories": { "output": "dist" }, "files": [ "dist/**/*", "main.js" ], "mac": { "target": "dmg" }, "win": { "target": "nsis" } } } ``` 最后，运行以下命令进行打包： ```bash npm run build ``` 打包完成后，你会在 `dist` 目录下找到相应的可执行文件和安装包。 希望这些步骤能帮助到你！如有其他问题，请随时提问。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值