Electron+Vue手动搭建(非electron-vue方式)
以往的electron-vue框架搭建比较便捷，但是在打包时会出现一些报错。不知道是不是我的问题，所以我这次想手动搭建，使用electron比较新的版本+Vue2.x版本(由于3.x还没有着手在项目中实践故没有用)。本次博客不同以往，现在网上对electron的资料偏少，我想用更多的文字+代码把搭建描述清楚。
废话不说先上环境（nodejs版本16.13.0目前最新版本16.14.0，npm版本8.1.0）
环境搭建
我们希望使用yarn进行依赖管理，所以我先进行了yarn的安装
npm install -g yarn
yarn --version
# 我的版本是：1.22.17yarn 安装后我们再使用npm进行Vue的脚手架安装
npm install -g @vue/cli
vue --version
# 我的版本是：@vue/cli 4.5.15
# 为了使用最新的vue脚手架我通过yarn global add @vue/cli 将脚手架更新到了@vue/[email protected]
yarn global add @vue/cli
# 接下来我再次进行vue --version
vue --version
# 我的版本是：@vue/cli 5.0.1以上这几步骤如果之前做过前端开发应该都有使用过，下面开始咱们的项目搭建
创建Vue工程项目
vue create
#是你的项目名称 回车后弹出以下内容：
Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
# 由于我希望使用Vue2.x所以我选择了第二项 Default ([Vue 2] babel, eslint)
# 这里使用上下键回车即可选择结束后弹出内容：
Vue CLI v5.0.1
✨ Creating project in /Users/jackmeng/Desktop/. #这里是你的项目名称
Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.17
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
success Saved lockfile.
✨ Done in 18.44s.
Invoking generators...
Installing additional dependencies...
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
✨ Done in 5.75s.
⚓ Running completion hooks...
Generating README.md...
Successfully created project api_recorder.
Get started with the following commands:
$ cd . #这里是你的项目名称
$ yarn serve 为了验证vue的创建成功我们可以先进入项目目录
cd #这里是你的项目名称
ls
#以下是返回内容
#README.md jsconfig.json package.json src yarn.lock
#babel.config.js node_modules public vue.config.js
yarn serve
#以下是返回内容
#DONE Compiled successfully in 5114ms 上午10:24:50
#
#
# App running at:
# - Local: http://localhost:8080/
# - Network: http://192.168.43.237:8080/
#
# Note that the development build is not optimized.
# To create a production build, run yarn build. 在这里启动后，通过http://localhost:8080我在chrome上可以看到vue的经典页面。这里证明vue的环境已经搭建完成。
使用electron-builder插件
如果按照上面的步骤我们应该就在你的项目目录下，若不在你的项目目录下请手动cd到你的项目目录下
cd #这里是你的项目名称 接下来开始在目录下引入插件
vue add electron-builder在依赖安装成功后，弹出以下内容
? Choose Electron Version (Use arrow keys)
^11.0.0
^12.0.0
❯ ^13.0.0
# 由于我就是本着最新版本的electron去的，于是我先登录了electron的官网(https://www.electronjs.org/)
# 我看electron的最高版本是17.x bulider返回的版本是13.0.0 在官网显示13.0.0版本是9个月前的版本
# 最终觉得不换了(其实是不知道electron的版本规则，13.x的最新版本是4周前，17.x的最新版本是4天前。这几周怎么更新了这么多版本？)
选择后进行依赖的安装,安装成功后检查package.json文件
vi package.json
#以下仅为package.json的部分内容
#scripts": {
# "serve": "vue-cli-service serve",
# "build": "vue-cli-service build",
# "lint": "vue-cli-service lint",
# "electron:build": "vue-cli-service electron:build",
# "electron:serve": "vue-cli-service electron:serve",
# "postinstall": "electron-builder install-app-deps",
# "postuninstall": "electron-builder install-app-deps"
# },
# 可以看到script里有electron:serve命令，于是执行了下yarn run electron:serve
yarn run electron:serve执行后则展示出：
以上开发运行已经没问题，接下来我们尝试打包
yarn run electron:build发现返回有报错：(由于报错信息比较长，这里就只取了部分信息)
⨯ Get "https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-darwin-x64.zip": EOF
#下面包含一个报错
code: 'ERR_ELECTRON_BUILDER_CANNOT_EXECUTE'
#我通过上面的步骤，加上卡顿的时间较长初步判断是由于yarn的源可能链接不上或者链接比较慢导致的我通过以上步骤，通过判断初步觉得是源的问题，于是立刻设置了yarn的源
yarn config set registry https://registry.npm.taobao.org
# 返回内容如下：
# yarn config v1.22.17
# success Set "registry" to "https://registry.npm.taobao.org".
# ✨ Done in 0.04s.
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
# 返回内容如下：
# yarn config v1.22.17
# success Set "electron_mirror" to "https://npm.taobao.org/mirrors/electron/".
# ✨ Done in 0.04s.再次执行yarn run electron:build
yarn run electron:build等待数秒终于完成了build
# 以下为返回的部分
# DONE Build complete!
#✨ Done in 74.87s.由于我是mac，我可以在dist_electron目录下看到dmg文件，打开dmg文件可以看到我们打包的程序。
由此，electron和vue的手动搭建完成。
后续可在里面继续集成路由、axios、elementui、iview等等。
如有问题，希望大佬指正。