Electron

如何优雅的使用Electron开发跨平台桌面应用

2020-03-25  本文已影响0人  合欢猪

一、背景

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器

目前市面上的资料大都是electron+vue以强关联形式的组合编译，虽然可以共用一套package.json，但缺点是坑真的特别特别多，本人也是因为填坑无力，所以才有的这篇文章

二、思路

整体思路非常简单，也非常容易被接受，大致就分以下几个步骤（【】内命名皆随意）：

  1. 创建空vue项目
  2. 配置【1】package.json
  3. 创建空electron项目（与【1】的关系可以是完全独立两个项目，也可以嵌套在【1】项目根路径下以独立文件夹形式存在，本文以第二种方式呈现）
  4. 配置【3】package.json
  5. 编译【1】，生成dist文件夹
  6. 将dist文件夹移动到【3】根路径下
  7. 进入【3】根目录，编译【3】
  8. electron-builder打包

三、项目结构

截屏2020-03-25下午6.34.53.png

四、具体流程

4.1、创建vue项目

具体过程就不多赘述了，官网很详细

vue create [projectName]

4.2、创建Electron项目

在【4.1】根目录下创建【release】文件夹

在【release】文件夹下执行electron创建命令，详情可以参照electron开发文档

一个最基本的electron应用应该会有如下结构：

your-app/
├── package.json
├── main.js
└── index.html

具体的创建细节及描述请参考Electron文档-打造你的第一个Electron应用

4.3、配置vue项目config文件

配置该文件的目的是为了顺利打包vue项目，此处我是新建了vue.config.js文件用来处理此类配置，

针对本文的配置也挺简单，只是列出了几项，详情可参照配置参考

module.exports = {  
// 部署生产环境和开发环境下的URL 
publicPath: './', 
// 生成的文件的总文件夹的名称
 outputDir:'./release/dist',
 // 指定生成的html文件的输出路径 (配置之后，改变系统默认的index.html的文件名)
 indexPath:'./index.html', 
// 针对map文件,map文件的作用:打包之后的项目,代码都经过了压缩加密
 // 这时如果报错,无法准确得知错误在哪里产生,有了map文件,就可以精准定位到是哪里出错
 // 如果打包后发现map文件体积过大,导致整个项目文件体积过大,就可以设置不输出map文件 
productionSourceMap:false,
 devServer: { 
// can be overwritten by process.env.HOST 
host: '0.0.0.0',
port: 8080 
}, 
pluginOptions: { 
electronBuilder: {
 builderOptions: 
{ win: { icon: './public/app.ico' }, 
mac: { icon: './public/app.png' }
}
}
}
};

4.4、编译vue项目

此步骤的目的在于生成dist文件夹，默认情况下会生成在vue项目根路径下，但通过对【4.3】的配置，此处将dist文件夹生成在./release/dist，以便Electron最终调用。

通过前文vue项目创建之后，会在package.json的scripts下生成build指令，可自行查看

以本文为例：

// 本文中的package.json
 "scripts": {  
"serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
 }  
// 命令行执行打包指令
npm run build

4.5、配置Electron项目

Electron打包时需要icon等基本资源文件，本文是直接在【release】文件夹下创建了一个【build】文件夹，用于存储icon等资源文件

Electron配置文件：

截屏2020-03-25下午7.50.14.png

上述图片展示的就是demo涉及到的一些配置信息，接下来就是最容易出错的一步了，如何让Electron项目与dist文件夹进行关联绑定，以便能正常显示vue打包内容：

4.6、配置main.js

配置Electron根项目下的main.js，也是Electron应用的启动函数

此处也是主要将与官网提供的不同之处做了标记，改动如下：

截屏2020-03-25下午8.07.50.png

OK，到这一步后就可以执行打包操作了，打包指令查看Electron项目的package文件

4.7、打包

执行打包操作后最终项目结构：

截屏2020-03-25下午7.57.03.png

到此Electron+vue从0-1的打包过程就结束了，最终在平台上的运行效果：

截屏2020-03-25下午8.03.20.png 截屏2020-03-25下午8.03.36.png
上一篇 下一篇

猜你喜欢

热点阅读