前端页面转客户端软件

介绍一个将前端开发的Web页面转成电脑客户端软件的方案,且不需要修改前端代码。
或者想通过前端技术来编写PC客户端软件。

安装和示例

使用到的工具：localize-webui

# 直接从npm源安装localize-webui包
npm install localize-webui
# 跑一遍包里提供的例子
npx localize-webui

自己项目中使用

安装完localize-webui后，从node_modules/localize-webui/local.config.json拷贝一份配置到自己的项目中。

按需修改其中的配置项：

{
  "project": { // 项目配置
    "entry": "/...项目路径.../index.html", // 改成你前端页面的html
    "icon": "/...项目路径.../favicon.png" // 客户端软件的icon
  },
  "server": { // 服务配置
    "host": "http://127.0.0.1:8000", // 如果有跟HTTP服务交互的需求
    "prefix": "/api" // HTTP接口的前缀
  },
  "app": { // 客户端窗口配置
    "window": { // 窗口大小
      "width": 800,
      "height": 600
    },
    "maximize": false, // 是否在打开时最大化窗口
    "openDevTools": false // 是否需要打开devtools工具
  }
}

配置基本跟electron相同，只是不需要自己编写electron的代码了。

修改完配置后运行

npx localize-webui --config=./local.config.json

可以使用vue或react框架开发页面，编译得到页面代码，再使用localize-webui将页面转成客户端软件。

温馨提示

目前，localize-webui该工具更新到1.0.3版本，可能存在一些问题。不过该项目是github上的开源软件，发现问题可以在github提issue，作者会及时更新。觉得不错的话，可以给作者点个star鼓励下。
Github地址