MacOS中使用Electron构建Vue项目在Windows环境的安装包

前言

新项目是作为定制项目需要通过安装包的方式在客户电脑上安装使用, 前端使用vue编写项目功能, 由于前端躺平了, 所以只能让我们写后端的来搞这种东西, 想到是使用Electron来构建这样的客户端软件以满足业务需求.

例如postman, twitch的客户端软件都是通过Electron构建的, 但对于技术力较弱的公司, 直接使用electron开发项目还是有较高的学习成本, 所以本次实现只能是使用Electron构建一个客户端应用, 然后通过Electron构建的客户端(本质上是一个嵌入chromium的浏览器)打开网站网页来达到目的, 跳转的代码很简单, 所以写前端的同学看了图一乐就行

本次处理的问题主要在于使用 macOS 作为开发机的时候将Electron打包生成Windows安装文件的一个过程, 主要还是懒, 懒得在自己mac上搞完之后又弄到win上折腾, 如果不嫌麻烦的话, 使用electron-forge打包后的文件使用windows上的安装包构建工具也能创建安装包

前置要求

• node版本需要在16以上, electron-forge要求至少14.7以上
• npm最好使用淘宝镜像, 通过 npm config set xxx xxx 设置对应参数
  • registry = “https://registry.npm.taobao.org/”
  • disturl = “https://npm.taobao.org/dist”
• 安装 n 组件
  • npm install n -g
  • 在系统环境变量没有被改变的情况下, 使用 n stable , n latest 或 n 具体版本号切换node环境
  • 这里使用最简单的 n stable, 对应16.17.1 (如果终端中没有变化,那么重启一个终端使用 node -v查看)
  • 注意 如果此前安装过jhipster, 会将node强制使用18.0.0, 无法用n工具修改, 需要先卸载掉
• 安装electron
  • npm install electron --save-dev
• 安装 electron-forge
  • 可以一条命令直接生成windows环境可执行文件, 如果需要打包构建安装包, 还需要其他工具, 例如在win系统里的构建安装包的软件等
  • npm install --save-dev @electron-forge/cli
  • npx electron-forge import
  • 使用 npm run make 将构建出对应操作系统的可执行包, 非安装包
• 安装 electron-builder
  • 通过该组件一条命令生成安装包
  • npm install --save-dev electron-builder
  • 在目前对应脚本下不做修改, 执行 npm run buildwin 将在对应目录下生成windows的安装包

Electron

在Electron快速入门篇中了解到, 入口为main.js, 其中主要是通过创建一个new BrowserWindow()来展示页面, 使用loadURL来打开一个页面等

构建项目

• 初始化一个项目

npm init
#入口写main.js, 或者在生成后在package.json中修改也行

• 安装electron

node install electron --save-dev

• 创建main.js, 并在main.js引入模块并添加方法, 最简化配置
  preload.js, index.html等对于本次配置都是不必要的, 需要的话可按照官方文档配置一下

const {app, BrowserWindow} = require('electron')
const path = require('path')

const createWindow = ()=>{
// https://www.electronjs.org/zh/docs/latest/api/browser-window
  const win = new BrowserWindow({
	  width: 1000,
	  height: 800,
	  //配置一个图标, 文档中提到对于win来说,最好使用ico,不配置就使用安装包中的, 说白了不配置就是electron本身的那个图标
    icon: __dirname + '/icon/logo.png'
	})
	//这里一般是项目首页, 这次使用vue单独写的前端,然后在nginx发布项目
  win.loadURL('http://192.168.0.192:1024/xxxxx')
}

//见名知意,ready之后创建软件窗口 ( 公司里其他人写的那些拼音缩写看得真的叫人头大 :( )
app.whenReady().then(()=>{
  createWindow()
  app.on('activate', ()=>{
    if (BrowserWindow.getAllWindows().length===0) createWindow()
  })
})

//对于macOS,关闭不是真退出, 这里处理一下
app.on('window-all-closed',()=>{
  if(process.platform != 'darwin') app.quit()
})

注意这里的url最好使用域名, ip:port如果变化, 例如最坏情况换服务器商,像我这种小公司就经常发生这种问题, 那么安装到客户端的应用就必须更新, 如果没有实现自动更新, 那么就只能重新给客户发包重新安装, 这个是必须考虑的问题
域名https配置可以参考: Nginx + CertBot 泛解析域名申请https证书以及利用脚本完成证书自动续期

win.loadURL(url[, options])​ 的基本介绍
- url string
- options Object (可选)
- httpReferrer (string | Referrer) (可选) - HTTP 引用 url。
- userAgent string (可选) - 发起请求的 userAgent.
- extraHeaders string (可选) - 用 “\n” 分割的额外标题
- postData (UploadRawData | UploadFile)[] (可选)
- baseURLForDataURL string (可选) - 要由数据URL加载的文件基本URL(末尾带有路径分隔符)。 仅当指定的url是数据url并且需要加载其他文件时，才需要此选项。

• electron forge

npm install --save-dev @electron-forge/cli
npx electron-forge import

• electron builder

npm install --save-dev electron-builder

• package.json

{
  "productName":"自定义项目名称",
  //name属性是不支持中文的
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "testing electron",
  "main": "main.js",
  "scripts": {
  	// forge组件是官方推荐的, 使用forge来启动测试即可
    "start": "electron-forge start",
    // electron builder 生成可执行文件和安装包
    "buildwin":"electron-builder --win --x64",
    // forge没有仔细查, 目前在macOS环境下是直接打包为macOS的可执行文件.app
    "package": "electron-forge package",
    // 另一个打包组件 packager, 此方式只能生成可执行文件, 没有安装包
    "package-win":"electron-packager ./ --platform=win32 --out ./dist  --overwrite  --ignore=node_modules --arch=x64",
    // 用forge创建可分发的应用程序
    "make": "electron-forge make"
  },
  //electron-builder的配置块
  //https://www.electron.build/configuration/configuration#configuration
  "build":{
	  //这个名称就是安装包和安装后软件在系统中的名称,支持中文等name不支持的字符
	  //builder使用顺序 build.productName > productName > name
    "productName":"自定义项目名称",
    "appId":"唯一id",
    //构建输出目录,自定义
    "directories":{
        "output":"build"
    },
    //macOS配置, 此次用不到, 但是一看也就知道是配什么的了
    "dmg":{
      "icon":"./icon/logo.png",
      "window":{
        "x":"200",
        "y":"150",
        "width":500,
        "height":400
      }
    },
    "mac":{
      "icon":"./icon/logo.png",
      "target": [
          "dmg",
          "zip"
        ]
    },
    //win配置
    //https://www.electron.build/configuration/win
    "win": {
        "icon":"./icon/logo.png",
        "target": [
          "nsis",
          "zip"
        ]
    },
    //安装程序的配置, 详细介绍看看文档, 一目了然
    //https://www.electron.build/configuration/nsis
    "nsis": {
    	//是否创建一键安装
        "oneClick": false,
        "allowElevation": true,
        "allowToChangeInstallationDirectory": true,
        "installerIcon": "icon/favicon.ico",
        "installerHeaderIcon": "icon/favicon.ico",
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true
     }
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.67",
    "@electron-forge/maker-deb": "^6.0.0-beta.67",
    "@electron-forge/maker-rpm": "^6.0.0-beta.67",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.67",
    "@electron-forge/maker-zip": "^6.0.0-beta.67",
    "electron": "^21.1.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
  // electron forge的配置
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "自定义项目名称"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin",
	    "win32"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

• 打包
  将会在build目录下生成相关文件

npm run buildwin

• 构建结果
  
• 安装
  
  可自定位置
  
  安装后, 目录下使用的是自定义图标, 要注意的是目录默认会使用package.json的name作为安装的目录
  

最后整个项目树极其简单

❯ tree .
.
├── icon
│   └── logo.png
├── main.js
└── package.json

结束

太懒了:( , 没去细看怎么做自动更新, 目前的方案只要是打开的url是域名就没什么问题了, 本次实现只是基于electron打开url这个简单需求, 没有深入, 其他资源还需要各位看文档了, 如果大家知道怎么做自动更新的也欢迎留言