Skip to content

介绍

该模式可加载web地址,而且可以使用框架中的功能。

使用场景

对于web项目,并且希望拥有软件客户端的用户来说,十分有用。

官方demo

demo地址:http://electron-egg.kaka996.com/

javascript
/**
 * 远程模式-web地址
 */    
remoteUrl = {
  enable: true,
  url: 'http://electron-egg.kaka996.com/'
};

运行软件查看效果

bash
npm run start

运行图片

开始一个项目

开发环境

  1. 启动前端
bash
# 进入【前端目录】
cd frontend 

# 安装依赖
npm install

# 启动服务
npm run dev
  1. 配置
javascript
// config.default.js

/**
 * 远程模式-web地址
 */
remoteUrl = {
  enable: true,
  url: '前端服务地址,如:http://localhost:8080/'
};
  1. 启动
bash
npm run dev

生产环境

将前端构建后的资源放到你自己的服务器上,并配置nginx服务,域名。配置prod:

javascript
// config.prod.js

/**
 * 远程模式-web地址
 */
exports.remoteUrl = {
  enable: true,
  url: '你的项目域名'
};

# 说明
remoteUrl对象会覆盖 config.default.js 中 remoteUrl对象

构建软件

生成软件 ,直接从第二步开始。

说明:因为加载的资源是远程服务,因此不会使用本地的前端资源,所以直接从第二步开始。

一套前端代码多端使用

可以用以下代码,判断当前(前端)页面环境是在服务器,还是用户电脑。

javascript
const isEE = (window.require && window.require('electron')) ? true : false;

注:demo中并没有区分环境,浏览器访问时会有部分报错,请开发者自行处理。

发挥你的想象

虽然它是一个远程地址,但是它却可以发消息到主进程,发挥你的想象,创造出有趣软件。