Electron开发 —— 简单demo之整合vue
2020-08-25 本文已影响0人
潇潇剑_易水阁
总得有个开始
前置条件：
- Electron开发 —— 简单demo
- vue开发 —— 简单demo
- vue 2.x（3.x后续补上，请注意）
- vue CLI 4.x
- vscore编辑器（非必须，自选喜欢即可）
- 本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网
一：步骤：
1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章节demo，故先采取js引用，仅修改的index.html，其他不变，改动如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
</head>
<body>
<div id="app">{{ content }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
content: '潇风剑易水',
},
});
</script>
</body>
</html>
1. 1、运行结果如下：
npm start
demo运行图：
demo运行图.png
2. 脚手架CLI，和引用js其实是一样的，只是前面需要把vue框架转译成原生js这些，多了这个步骤，故下面的操作也是基于此去改造，当然后面再整合为一个框架，编译打包这些对外透明，目前流程仅为一步步摸索到，且，对应的脚手架已有，各位也是可以下他那个直接用。参考之前vue脚手架搭建栗子，搭建一个demo，然后install引入Electron
2.1 回顾前面的Electron demo，首先要在package.json里面设置运行的脚本index.js，Electron运行时会依据这个来创建窗口，其次是这个运行脚本需要指定运行的首页index.html；到此在回顾vueCLI的运行过程，默认就是脚手架指定生成的src下面的index.js和pubic下面的index.html，至此整合的目的就是把2处合在一起，即可既是vue也是Electron，实际上抛开pc窗口应用程序来看，不外乎就是引入了vue.js和electron.js，梳理清楚后，请按以下操作，当然客官有更简便的做法那就不必按部就班
2.2 暂且规定vueCLI打包后的路径为根目录下的dist文件，故Electron启动转译的地方也将是这里，不再是项目根目录下的main.js（当然你也是可以指向这里，其次下面均改名为index.js，因为不在担任重要的业务逻辑，或者改成init.js更为合适），package.json指定位置设置为dist/index.js,总所周知，在CLI打包后是根本没有index.js，仅仅为不重复的hash命名的js，但是首页index.html是存在的，参考index.html保持原来的原理，在public目录下创建index.js，再次声明这个js，主要是负责创建Electron容器的，并不负责项目的业务逻辑，一般变化不大，所以也不太需要hash命名，也方便指定，index.js内容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
})
// 加载index.html文件，注意此处路径
win.loadFile('dist/index.html')
}
// 应用程序准备就绪后打开一个窗口
app.whenReady().then(createWindow)
2.3 项目根目录新增vue.config.js ，指定vue打包的路径以及资源的相对路径，如下：
module.exports = {
// 相对路径
publicPath:'./',
// 打包输出路径
outputDir: 'dist',
};
2.4 修改package.json的main和scripts节点，如下：
"main": "dist/index.js",
"scripts": {
"electron-start": "electron .",
"vue-build": "vue-cli-service build",
"client": "vue-cli-service build && electron ."
},
2.5 执行vue-build转译打包
npm run vue-build
2.6 执行electron-start启动electron应用
npm run electron-start
2.7 正如你所见，直接执行client指令是可以连续运行2个指令的，为何要单独引出，仅为了提醒各位混合开发的本质，当然需要合并scripts2个子节点的key达到scripts命令复用，请引入npm-run-all，例：
"client": "npm-run-all electron-start && vue-build"
demo运行图：
demo运行图.png
3. electron打包，当前我已知有2种，其一为官网文档突显的第三方electron-builder、其二为自家的electron-packager，暂无空研究两者的区别，需要注意两者依赖的node.js的版本，可能是某些地方没处理好，8.x版本在使用electron-builder打包时遇到如下错误：
你该项目地址\node_modules\electron-builder\node_modules\fs-extra\lib\mkdirs\make-dir.js:85
} catch {
^
SyntaxError: Unexpected token {
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
但是使用electron-packager倒是疼快，直接简单粗暴（至少从这点我是倾向于它的）：
Electron Packager requires Node >= 10.12.0.
当然官网那个apiDemo是可以打包的，至于为啥这个可以，请自行比较，本人感觉个中意义不大，最后的解决，当然是选择升级我当前的node版本，从v8.11.3到v12.18.3（windows的用户请直接覆盖安装，或其他工具），或许你能找到不用升级的原因，那恭喜你
正题，即是2种方案都需要install进项目内，本身并不包含，特别注意傲娇的electron-builder，详情见Electron开发 —— 问题汇集 ，要是你遵循文档的yarn引入倒是没这个烦恼，对，是时候了解下yarn了，安装好后，需要修改package.json，加入指令如下（若非VueCli集成请去掉前面vue相关指令）：
// 当打包工具为electron-packager，此处仅选windows和安装形式
"build": "vue-cli-service build && electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out "
// 当打包工具为electron-builder,默认为win以及out路径以及免安装形式，其他需要自行修改
"pack": "vue-cli-service build && electron-builder"
