一键快速构建 vue-electron 项目

vue-cli

安装 vue-cli
脚手架版本需 ≥ 3.0

// 全局安装 vue-cli
npm install vue-cli -g

构建项目

cd 到你需要创建项目的文件夹路径下
开始构建项目

// 执行
vue create your-project
// 选项默认即可，直接回车
// 也可自定义，详细选择babel、eslint等配置项，需要自定义的同学，想必也用不着看这篇教程
// 等待安装(~20s)
// ...

这里聊一下 vue-cli 的另一种打开方式

// 有种可视化界面的操作，适合刚入门的实习生操作
// 执行
vue ui

浏览器会弹出创建项目的界面
对刚接触前端没有太多技术储备的小朋友非常友好
流下妒忌羡慕的泪水

集成 electron 插件

cd 进构建好的项目文件夹

// 执行
vue add vue-cli-plugin-electron-builder
// 这时命令行会弹出一个版本选择的选项列表，上下键移动，回车选择
// 如需缩减生成的app体积，可选择较低版本
// 如需更好的新特性支持，可选择最高版本
// 等待安装(~20s)
// ...

跑起来！

正经项目都必需先跑起来

// 执行
npm run electron:serve

弹出应用窗口，成功

目录结构

用过 vue 的同学们对这个结构很熟悉
集成了 electron 插件后，只是在 /src 下创建了一个 background.js 文件作为 electron 的入口文件，其余跟普通的vue项目没有太大区别

打包 / 其他配置

首先是镜像，可以全局配置

// 淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
// 华为镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm config set disturl https://mirrors.huaweicloud.com/nodejs/
npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

该处提示 electron-builder 报错
UnhandledPromiseRejectionWarning: Error: ‘build’ in the application package.json is not supported since 3.0 anymore. Please move ‘build’ into the development package.json
尚不清楚是否 vue-cli 3.0 不支持/dist_electron/bundled/package.json中配置的方式
持续探索中…
但是第一次打包的时候发现 electron-builder 还是会去发起很多下载请求
所以需要在配置里增加镜像配置
在根目录新建 vue.config.js

// vue的其他配置也会卸载这里
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/"
        },
        win: {
          icon: './public/favicon.ico'
        },
        mac: {
          icon: './public/app.png'
        }
      }
    }
  }
}

打包提示缺少 author 和 description
于是在 package.json 加上

  "name": ".",
  "version": "0.0.1",
  "productName": ".",
  "author": ".",
  "description": ".'s description",
  "appId": ".",

目前使用单独的 electron 项目作为打包工具
生成vue项目后，复制 dist 下的文件去到 electron 项目中单独打包
暂时应对项目需求，后期探索改进