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

目录

科普小知识

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 .

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