Electron 是由 GitHub 开发, 用 html,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库. Electron 通过将 Chromium 和 Node.JS 合并到同一个运行时环境中, 并将其打包为 Mac,Windows 和 Linux 系统下的应用来实现这一目的.
本文利用 vue-cli 快速搭建一个项目说明怎么将一个 web 应用打包构建成桌面应用的过程
开始
使用 NPM init 初始化项目, 配置依赖 electron,electron-builder(打包组件), 这里如果安装 electron 或者启动时报错, 可以删除 node_modules 中 electron 的使用 NPM i electron@+ 指定版本即可
- {
- "name": "electron-quick-start",
- "version": "1.0.0",
- "description": "A minimal Electron application",
- "main": "main.js",
- "scripts": {
- "start": "electron .",
- "build_win": "electron-builder --win --x64",
- "build_mac": "electron-builder --mac --x64"
- },
- "build": {
- "productName": "vuecli"
- },
- "repository": "https://github.com/electron/electron-quick-start",
- "keywords": [
- "Electron",
- "quick",
- "start",
- "tutorial",
- "demo"
- ],
- "author": "GitHub",
- "license": "CC0-1.0",
- "devDependencies": {
- "electron": "^3.1.0",
- "electron-builder": "^21.2.0"
- }
- }
package.JSON 需要注意的参数:
: 项目入口文件, 文件用于配置启动所需参数
scripts: 启动命令
start: 开发启动命令
build_win: 构建 win 桌面应用
build_mac: 构建 macos 桌面应用
build: 构建应用参数, 所有参数参考 electron-build
productName: 应用名称
output: 产出目录
main.JS
官方例子
- // Modules to control application life and create native browser Windows
- const {App, BrowserWindow} = require('electron')
- const path = require('path')
- // Keep a global reference of the Windows object, if you don't, the Windows will
- // be closed automatically when the JavaScript object is garbage collected.
- let mainWindow
- function createWindow () {
- // Create the browser Windows.
- mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- webSecurity: false
- }
- })
- // and load the index.HTML of the App.
- mainWindow.loadFile('index.html')
- // Open the DevTools.
- // mainWindow.webContents.openDevTools()
- // Emitted when the Windows is closed.
- mainWindow.on('closed', function () {
- // Dereference the Windows object, usually you would store Windows
- // in an array if your App supports multi Windows, this is the time
- // when you should delete the corresponding element.
- mainWindow = null
- })
- }
- // This method will be called when Electron has finished
- // initialization and is ready to create browser Windows.
- // Some APIs can only be used after this event occurs.
- App.on('ready', createWindow)
- // Quit when all Windows are closed.
- App.on('window-all-closed', function () {
- // On macOS it is common for applications and their menu bar
- // to stay active until the user quits explicitly with Cmd + Q
- if (process.platform !== 'darwin') App.quit()
- })
- App.on('activate', function () {
- // On macOS it's common to re-create a Windows in the App when the
- // dock icon is clicked and there are no other Windows open.
- if (mainWindow === null) createWindow()
- })
BrowserWindow 浏览器代理, 设置窗口信息等, mainWindow.loadFile('index.html') 引入主页文件, webSecurity 设置 false 可忽略浏览器跨域等, 该设置可禁止浏览器同源策略, 只能在测试环境使用, 如需上线正式环境需另外配置网络代理.
静态文件准备
http 请求
在测试环境下, 如在 main.JS 中设置了 webSecurity 为 false, 接口请求地址可设置为绝对路径 (此设置忽略跨域), 生产环境需另配网络转发.
路由
需修改的相关静态文件地址为相对路径, vue.config.JS 配置如下:
- module.exports = {
- assetsDir: 'static',
- publicPath: './'
- };
启动 NPM run build 开始打包, 打包后的文件在 dist 中, dist 文件夹下的文件全部拷贝到 electron 的初始化项目的根目录下, 运行 NPM start 即可正常访问, NPM run build_mac 开发打包, 完成后在根目录的 dist 下生成 vuecli-1.0.0.dmg 的桌面应用安装包
来源: http://www.jianshu.com/p/4b8ba30b173b