手把手electron-vue项目搭建 web技术搭建前端桌面应用.exe【踩坑记录】

简介

本文档目的在于从0开始搭建一个 electron-vue 项目，以桌面端形式开发 vue 项目（整体开发，而非单纯打包vue项目包），并顺利打包上线，为初接触 electron 的前端程序员入门提供帮助。

前置条件

1. windows系统
2. 安装nodejs、npm
3. 全局安装vue-cli
4. 科学上网

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

创建项目

使用 vue-cli 创建 electron-vue 模板（科学上网）

// 可能会提示安装 @vue/cli-init
// 没有提示则无需安装，我用的版本是 v4.*.*
npm i -g @vue/cli-init

// 使用 vue-cli 创建 electron-vue 模板
// 下载模块，需要科学上网（临时使用可狗度 fotiaoqiang 菜鸡友好）
// 一次卡住多试几次
vue init simulatedgreg/electron-vue my-project
// enter后等待选择相关配置，默认全部都安装

注：倒数第二项询问打包方式选择 package or builder 时请选择 builder，尝试多次 package 无法打包成功

安装成功截图

看到这个图说明创建项目成功

启动项目

cd进项目文件夹执行以下命令

// 安装成功后下载依赖
npm run i

// 依赖下载完成后就可以跑起来了
npm run dev

现在可以开发了

打包（bug处理）【重要】

现在来说 electron-vue 里最辣鸡的一个地方——打包
打包这一步有很多坑

1. 语法错误
   package.json 中打包命令描述得非常清楚
   但是直接运行 npm run build 的时候必然会报错
   因为 build.js 里的语法是错误的：tasks变量重复声明
   报错的文件：/my-project/.electron-vue/build.js
   
   而我们要做的也很简单，换一个变量名
   
2. 缺少依赖
   继续打包会发现报错 Multispinner 未定义，使用了 Multispinner 却没有安装和引入
   
   所以需要我们手动安装以及修改代码引入

npm install multispinner --save

安装好依赖模块，修改 build.js 文件

// build.js 引入依赖
const Multispinner = require('multispinner');

3. 缺少文件
   再次运行 npm run build
   按照 这篇帖子 所述会去到github下载几个模块，但是我使用科学上网法并没有遇到所有的文件缺失报错，如果遇到可自行参考
   缺少文件的且无法通过科学方法解决的情况，可以参考 这一篇讲得非常详细的帖子

以下是我安装时缺失的文件

• 缺少/nsis-3.0.3.2/nsis-3.0.3.2.7z
  跳转github手动下载 github（.zip&.7z），或直接下载 点击下载(.7z)，均需科学一下
  将下载好的压缩文件内的文件（如下图）（直接下载的.7z开包即是）复制到 C:\Users\你的账号\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.3.2\没有文件夹新建即可
• 其余均用科学方法下载成功
• 初次下载成功后即可离线打包，不需要每次下载

4. 卡 OKAY take it away "electron-builder"
   运行 npm run build 的时候偶尔会报一个看起来不是错误的问题，打包过程会被阻断
   我在使用 electron-package 的时候出现这种情况，换成 electron-builder 不再出现
   

原因可能有几种：

1. 项目路径含有中文
2. 下载依赖使用了npm，删除 改为 yarn yarn官方文档
3. 创建项目时使用 electron-package 改为 electron-builder 解决