本文内容只适用于使用 electron-vue 模板生成的 electron 工程，相关配置也是围绕其进行。当然，使用 vuecli3 生成的 electron 工程也可参考。
对于 electron-vue 工程，由于理论上默认写死的 9080 端口可能出现被占用的情况，所以应用 http 服务应该采用自我判断的方式来使得端口保证可用。
实现判断逻辑
在 /lib/utils/ 下创建文件 portIsOccupied.js，实现判断端口占用情况，向进程环境 process.env 注入变量 DEV_PORT，并且返回可用的端口，使得主进程页面可以通过进程环境读取可用的端口，也可以获取通过 Promise.resolve() 返回的可用端口。
const net = require('net')
function portIsOccupied(port) {
const server = net.createServer().listen(port)
return new Promise((resolve, reject) => {
server.on('listening', () => {
console.log(`the server is runnint on port ${port}`)
server.close()
// 使用注入进程环境变量的方式进行状态共享
process.env.DEV_PORT = port
process.env.PROD_PORT = port
// 返回可用端口
resolve(port)
})
server.on('error', (err) => {
if (err.code === 'EADDRINUSE') {
//注意这句，如占用端口号+1
resolve(portIsOccupied(port + 1))
console.log(`this port ${port} is occupied.try another.`)
} else {
reject(err)
}
})
})
}
module.exports = portIsOccupied
配置开发模式下的端口
因为项目使用 electron-vue 生成工程，与现在主流使用的 vuecli3 生成的 electron 工程结构有差别，但逻辑基本一样。下面是针对 electron-vue 工程的配置。
找到工程的 /.electron/dev-runner.js 文件，可以看到服务是通过 WebpackDevServer 插件跑起来的，其中端口是写死的 9080。
const server = new WebpackDevServer(
compiler,
{
contentBase: path.join(__dirname, '../'),
quiet: true,
before (app, ctx) {
app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {
resolve()
})
}
}
)
server.listen(9080)
稍作修改，引入上面写好的函数，即可自行判断使用空闲的端口保证应用的运行。
const portIsOccupied = require('../lib/utils/portIsOccupied')
……
……
portIsOccupied(9080).then(port => {
server.listen(port)
})
配置生产模式下的端口
在主线程文件 /src/main/index.js 下引入判断函数，判断是生产模式则使用 express 作为本地打包文件的 http 静态服务器，使得 flash 能正常加载。
对原先写死端口的 localServer 函数进行改造，引入端口判断函数。
before :
function localServer() {
let server = express()
server.use(express.static(__dirname))
server.listen(9080)
}
after :
import portIsOccupied from '../../lib/utils/portIsOccupied'
function localServer() {
// 使用 promise 配合 await 实现同步
return new Promise((resolve, reject) => {
let server = express()
server.use(express.static(__dirname))
portIsOccupied(9080).then(port => {
server.listen(port)
resolve(port)
})
})
}
当在生产模式下执行 localServer 函数后，则可以在任意位置从进程环境读取到可用的端口，保证服务成功开启。
完整逻辑
下面是完整主线程文件 /src/main/index.js，具体逻辑如下：
import { app, BrowserWindow } from 'electron'
import express from 'express'
//引入自动判断端口可用函数
import portIsOccupied from '../../lib/utils/portIsOccupied'
/**
* Set `__static` path to static files in production
* https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
*/
if (process.env.NODE_ENV !== 'development') {
global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
//打包后的文件默认是以 "file://" 协议加载的
//因为 flash 不允许在 "file://" 协议下加载，为了解决 flash 加载的安全问题
//使用 express 用作本地服务器，使得页面运行在本地 http 端口服务
function localServer() {
// 使用 promise 配合 await 实现同步
return new Promise((resolve, reject) => {
let server = express()
server.use(express.static(__dirname));
portIsOccupied(9080).then(port => {
server.listen(port)
resolve(port)
})
})
}
let mainWindow
let flashPlugins = process.arch == 'x64'
? require('path').resolve(__dirname, '../../lib/pepflashplayer64_29_0_0_238.dll')
: require('path').resolve(__dirname, '../../lib/pepflashplayer32_29_0_0_238.dll')
if (__dirname.includes(".asar")) {
flashPlugins = process.arch == 'x64'
? require('path').join(process.resourcesPath + '/lib/pepflashplayer64_29_0_0_238.dll')
: require('path').join(process.resourcesPath + '/lib/pepflashplayer32_29_0_0_238.dll')
}
app.commandLine.appendSwitch('ppapi-flash-path', flashPlugins);
app.commandLine.appendSwitch('ppapi-flash-version', '29.0.0.238');
async function createWindow () {
if (process.env.NODE_ENV === "production") {
// 使用 async / await 实现同步等待，保证 process.env.PROD_PORT 的赋值
await localServer()
}
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:${process.env.DEV_PORT}`
// : `file://${__dirname}/index.html`
// 解决 flash 不允许在 "file://" 协议下加载的问题
: `http://localhost:${process.env.PROD_PORT}/index.html`
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 900,
width: 1600,
useContentSize: true,
frame: false,
center: true,
fullscreenable: false, // 是否允许全屏
center: true, // 是否出现在屏幕居中的位置
title: 'electron-rtmp',
backgroundColor: '#fff', // 背景色，用于transparent和frameless窗口
titleBarStyle: 'hidden', // 标题栏的样式，有hidden、hiddenInset、customButtonsOnHover等
resizable: false, // 是否允许拉伸大小
'webPreferences': {
plugins: true,
webSecurity: false,
defaultFontFamily: {
standard: "Microsoft YaHei",
defaultEncoding: "utf-8"
}
}
})
if (process.env.NODE_ENV == 'development') {
mainWindow.webContents.openDevTools()
}
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
