app头像上传vue_Vue+Electron开发跨平台桌面应用实践

总篇43篇 2019年第17篇

背景

公司去年对 CDN 资源服务器进行了迁移，由原来的通过 FTP 方式的文件存储改为了使用 S3 协议上传的对象存储，部门内 @柴俊堃 同学开发了一个命令行脚本工具 RapidTrans(睿传)，使用睿传可以很方便将本地目录下的资源上传到 S3 中。

睿传运行时接收两个主要参数，一个为待上传的本地路径，一个为上传到 CDN 后的路径，我们可以在项目的 package.json 中去配置 scripts执行上传。

npm run rapid-trans -- -s "/home/demo/work/mall2016/release/列表页" -p "2016/m/list"

用了一段时间后觉得如果选择本地路径的时候可以通过可视化的文件选择器的方式选择就太好了，团队一直在做客户端方向技术的储备，所以为了更方便团队的使用产生了将睿传封装成 GUI 的跨平台客户端的想法。

客户端界面

功能分析

• 桌面客户端，支持 Windows、Mac 系统

• 本地路径可以通过文件对话框或拖拽的方式进行选择

• CDN 路径可以通过输入框的方式输入

• 上传成功后将当前选择的本地路径和 CDN 的映射关系存储，下次再选择到当前目录的话直接使用之前 CDN 的路径地址，无需再次输入

• S3 参数配置化

• 自动升级

• 覆盖上传

技术选型

• Electron

• Vue

• LowDB 

Electron 简介

Electron 是由 Github 开发，基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建跨平台桌面应用的开源框架。

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。

简单点说，用 Electron 可以让我们在网页中使用 Node.js 的 API 和调用系统 API。

Vue + Electron 环境搭建

使用 vue-cli 脚手架和  electron-vue模板进行搭建，此处需要注意，由于 electron-vue 模板不支持 [email protected]，所以要使用 2.0 版本。

# 安装 [email protected]，若已安装则无需重复安装
npm install -g vue-cli
vue init simulatedgreg/electron-vue s3_upload_tool

# 安装依赖并运行
cd s3_upload_tool
npm install
npm run dev

目录结构

├─ .electron-vue
│  ├─ webpack.main.config.js
│  ├─ webpack.renderer.config.js
│  └─ webpack.web.config.js
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/
├─ src
│  ├─ main
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

应用的目录结构和平常我们用 Vue 做 WEB 端时生成的结构基本差异不大，所以本文我只介绍下与 Web 不同的几个目录。

.electron-vue

该目录下包含 3 个独立的 Webpack 配置文件

• .electron-vue/webpack.main.config.js 针对于 Ele