# 前端打包工具

**Repository Path**: zc16607/front-end-build-tool

## Basic Information

- **Project Name**: 前端打包工具
- **Description**: 前端打包工具，基于npm run build命令实现打包，支持打包多个项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-05
- **Last Updated**: 2023-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-frontend-build-tool

electron前端打包工具，windows客户端

使用vue3.3.4 + element-plus2.3.7 + vue_cli + vue-cli-plugin-electron-builder插件进行打包。

基于[electron多tab页客户端](https://gitee.com/zc16607/electron-client)开发，支持多tab页面，目前只用了一个单页面来实现打包用途

## 特性
1. 基于windows命令行，使用npm run build命令实现打包
2. 支持多个项目打包
3. 打包进度显示
4. 打包后压缩为一个压缩包

使用要求：所有项目都是同样的打包命令。
代码中写死了3个打包命令，分别是'test': 'npm run build:stage', 'train': 'npm run build:train', 'prod': 'npm run build'。
如果需要修改，在src/lib/controller.js中修改envCmdMapping，同时src/views/home页面上也需要对应修改环境

代码中复制文件时，针对nuxt项目做了特殊处理，需要根据自己的项目文件夹名称进行对应修改，位置在src/lib/controller.js中的execSingleCopy方法

注意，使用node运行和打包，合适的版本为 18 > node.js >=14，测试使用16.19.1可以正常运行，其他版本可能运行和打包失败。

## 预览图

配置界面
![screenshot.png](./img_README/config.png)


打包界面
![screenshot.png](./img_README/build-01.png)

![screenshot.png](./img_README/build-02.png)


## 开发

### 安装依赖
```
npm install
```

### 本地运行 
```
npm run electron:serve
```

### 编译为exe程序
```
npm run electron:build
```

### vue配置
见 [配置连接](https://cli.vuejs.org/config/).

### electron开发文档
见 [开发文档](https://cli.vuejs.org/config/).

### 客户端打包相关配置
见 [打包相关配置](https://www.electron.build/configuration/configuration).