以往的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.17
yarn 安装后我们再使用npm进行Vue的脚手架安装
npm install -g @vue/cli
vue --version
# 我的版本是:@vue/cli 4.5.15
# 为了使用最新的vue脚手架我通过yarn global add @vue/cli 将脚手架更新到了@vue/cli@5.0.1
yarn global add @vue/cli
# 接下来我再次进行vue --version
vue --version
# 我的版本是:@vue/cli 5.0.1
以上这几步骤如果之前做过前端开发应该都有使用过,下面开始咱们的项目搭建
创建Vue工程项目
vue create <projectName>
#<projectName>是你的项目名称
回车后弹出以下内容:
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/<projectName>. #这里<projectName>是你的项目名称
🗃 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 <projectName>. #这里<projectName>是你的项目名称
$ yarn serve
为了验证vue的创建成功我们可以先进入项目目录
cd <projectName> #这里<projectName>是你的项目名称
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 <projectName> #这里<projectName>是你的项目名称
接下来开始在目录下引入插件
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等等。
如有问题,希望大佬指正。