Electron 踩坑记录（三）

本文内容只适用于使用 electron-vue 模板生成的 electron 工程，相关配置也是围绕其进行。当然，使用 vuecli3 生成的 electron 工程也可参考。

对于 electron-vue 工程，由于理论上默认写死的 9080 端口可能出现被占用的情况，所以应用 http 服务应该采用自我判断的方式来使得端口保证可用。

electron 引用 flash 插件打包示例

实现判断逻辑

在 /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 工程结构有差别，