feat: 端口被占用时，自动切换端口

src/background.ts

@@ -8,7 +8,7 @@ import {
 } from 'vue-cli-plugin-electron-builder/lib'
 import App from './server/app'
 import messages from './assets/locales-menu'
-import createServer from './server'
+import initServer from './server'
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -105,12 +105,14 @@ function createWindow() {
     mainWindow: win,
     app,
     baseDir: __dirname,
+    previewServer: null,
   }
 
   // Init app
   const appInstance = new App(setting)
   console.log('Main process runing...', appInstance.appDir) // DELETE ME
-  createServer(`${appInstance.appDir}/output`)
+  const server = initServer(`${appInstance.appDir}/output`)
+  appInstance.previewServer = server
 }
 
 // Quit when all windows are closed.

src/components/Main.vue

@@ -129,7 +129,13 @@ export default class App extends Vue {
     ipcRenderer.send('html-render')
     ipcRenderer.once('html-rendered', (event: Event, result: any) => {
       this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
-      this.openInBrowser('http://localhost:9999')
+      ipcRenderer.send('app-preview-server-port-get')
+      ipcRenderer.once(
+        'app-preview-server-port-got',
+        (portGotEvent: Event, port: any) => {
+          this.openInBrowser(`http://localhost:${port}`)
+        },
+      )
     })
   }
 

src/server.ts

@@ -1,7 +1,21 @@
 import express from 'express'
+import http from 'http'
+import { AddressInfo } from 'net'
 
-export default function createServer(SitePath: string) {
+export default function initServer(SitePath: string) {
   const server = express()
   server.use(express.static(SitePath))
-  server.listen(9999, () => console.log('Express listening on port 9999'))
+  function listen(port: number) {
+    server.listen(port, 'localhost').on('error', (err: NodeJS.ErrnoException) => {
+      if (err) {
+        console.log(`Express port ${port} is busy, trying with port ${port + 1}`)
+        listen(port + 1)
+      }
+    }).on('listening', () => {
+      server.set('port', port)
+      console.log(`Express server is running on port : ${port}`)
+    })
+  }
+  listen(4000)
+  return server
 }

src/server/app.ts

@@ -1,6 +1,7 @@
 import { BrowserWindow, app } from 'electron'
 import * as fse from 'fs-extra'
 import * as path from 'path'
+import Antd from 'ant-design-vue'
 import EventClasses from './events/index'
 import Posts from './posts'
 import Tags from './tags'
@@ -22,13 +23,16 @@ export default class App {
 
   appDir: string
 
+  previewServer: any;
+
   db: IApplicationDb
 
   constructor(setting: IApplicationSetting) {
     this.mainWindow = setting.mainWindow
     this.app = setting.app
     this.baseDir = setting.baseDir
     this.appDir = path.join(this.app.getPath('documents'), 'gridea')
+    this.previewServer = setting.previewServer
 
     this.db = {
       posts: [],

src/server/events/site.ts

@@ -19,5 +19,10 @@ export default class SiteEvents {
       const result = await appInstance.saveSourceFolderSetting(params)
       event.sender.send('app-source-folder-set', result)
     })
+
+    ipcMain.on('app-preview-server-port-get', async (event: Event, params: string) => {
+      const port = await appInstance.previewServer.get('port')
+      event.sender.send('app-preview-server-port-got', port)
+    })
   }
 }

src/server/interfaces/application.ts

@@ -9,6 +9,7 @@ export interface IApplicationSetting {
   mainWindow: BrowserWindow
   app: any
   baseDir: string
+  previewServer: any
 }
 
 export interface IApplicationDb {

src/server/renderer.ts

@@ -34,6 +34,8 @@ export default class Renderer extends Model {
 
   git: SimpleGit
 
+  previewPort: number
+
   platformAddress = ''
 
   remoteUrl = ''
@@ -42,7 +44,7 @@ export default class Renderer extends Model {
 
   constructor(appInstance: any) {
     super(appInstance)
-
+    this.previewPort = appInstance.previewServer.get('port')
     this.loadConfig()
 
     const { setting } = this.db
@@ -60,7 +62,7 @@ export default class Renderer extends Model {
   }
 
   async preview() {
-    this.db.themeConfig.domain = 'http://localhost:9999'
+    this.db.themeConfig.domain = `http://localhost:${this.previewPort}`
     await this.renderAll()
   }