electron核心
electron核心我们可以分成2个部分,主进程和渲染进程
- 主进程
- 渲染进程
主进程连接着操作系统和渲染进程,可以把它看做页面和计算机沟通的桥梁。 渲染进程就是我们所熟悉前端环境了。只是载体改变了,从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。
而electron相当于node环境,我们可以在项目里使用所有的node api 。
桌面项目和 web项目
桌面项目
桌面项目 = 主进程 + 渲染进程
也就是electron桌面项目相对于是web项目 + node环境的壳
,也就是完整的electron项目,我们一般说的electron项目其实也就是指桌面项目,
在这里,我们可以使用node api 和electron的所有技术
web项目
web项目 = 渲染进程
所以web项目不能够包含node api和electron核心的通信机制等
如何知道项目运行在 桌面环境 还是 web环境
如何知道项目运行在桌面环境(electron环境)还是web环境(浏览器环境)
渲染进程中使用 process.env.IS_WEB
判断
process.env.IS_WEB
是暴露的一个全局变量,我们可以在渲染进程中获取,项目在electron环境下,返回false。否则为true;请记住,只有在渲染进程才能获取process.env.IS_WEB
,主进程是无法获取的(undefined)
于此,我们可以通过设置它的值来达到web dev的效果,
例1 :在main.js主进程中配置已根据不同环境加载不同文件或处理不同逻辑
/**------------------------------
electron环境(桌面环境)
--------------------------------*/
if (!process.env.IS_WEB) {
Vue.use(require('vue-electron'))
}
/**------------------------------
web环境
--------------------------------*/
if (process.env.IS_WEB) {
}
例2:在页面中根据不同运行环境进行不同显示
例3:根据不同环境来进行文件处理
- web端使用input file API
- electron桌面端使用 electron 的ipc和node 的fs处理模块
项目迁移到web端
如果要迁移项目到web端,就需要把项目中的electron提供的API和node的API完全剥离出来,只能遗留web的代码,比如 node fs模块,electron提供ipc 模块,都需要剥离。
web端一律不能使用 node fs模块,electron提供ipc
如果你一开始就打算双端程序,在开始写代码时应该对web代码和elecctron的代码进行分离,以便后期的迁移。
1.项目运行处理
- 进入渲染进程的main.js,对运行环境进行处理
当运行环境是桌面端时,动态引入ipc 和 fs
- 进入store文件夹的index.js 把用到electron ipc的相关代码都注释
这里的createPersistedState, createSharedMutations两个插件是electron提供的
- createPersistedState ——[数据持久化插件]
- createSharedMutations——[在标签/窗口之间共享Vuex mutations插件]
注释这两个插件
- 进入项目依赖配置文件package.json中添加web端运行脚本
- 进入dev-runner.js开发运行配置(.electron-vue\dev-runner.js)
其中DEV_TARGET值是package.json里通过npm run web脚本传递过来的参数取到的
- 重启项目,运行命令
npm run web
运行web端的
其他需要注意的是:如果项目无法正常运行在浏览器端,请确认项目中的关于node api使用的地方和electron ipc使用的地方是否都注释掉或者进行判断处理了
2.项目打包处理
根据全局变量process.env.NODE_ENV
来判断。
- 生产环境:
process.env.NODE_ENV !== 'production'
- 开发环境:
process.env.NODE_ENV !== 'development'
- 配置url服务器地址接口url
在渲染进程main.js中配置 建议看一下这篇文章 webpack-merge