🐛fix: preview not show bug due to incorrect hosts file

Author: CallanBi

src/assets/locales.ts

@@ -10,6 +10,7 @@ const message = {
     remote: '远 程',
     system: '系 统',
     renderSuccess: '渲染完毕，快去预览吧！',
+    renderError: '渲染失败，请检查 hosts 文件中 127.0.0.1 是否指向 localhost。确认配置正确后，尝试重启应用。',
     syncWarning: '必须完成配置才能同步哦！',
     syncSuccess: '同步成功啦！',
     syncError1: '同步遇到了错误，请查阅',
@@ -135,6 +136,7 @@ const message = {
     remote: '遠 程',
     system: '系 統',
     renderSuccess: '渲染完毕，快去预览吧！',
+    renderError: '渲染失敗，請檢查 hosts 文件中 127.0.0.1 是否指向 localhost。確認配置正確後，嘗試重啟應用。',
     syncWarning: '必須完成配置才能同步哦！',
     syncSuccess: '同步成功啦！',
     syncError1: '同步遇到了错误，请查閱',
@@ -259,6 +261,7 @@ const message = {
     remote: 'Server',
     system: 'System',
     renderSuccess: 'Congratulations, the rendering is complete, go ahead and preview.',
+    renderError: 'Rendering failed, please check whether 127.0.0.1 in the hosts file points to localhost. After confirming that the configuration is correct, try to restart the application.',
     syncWarning: 'You must complete the configuration to synchronize!',
     syncSuccess: 'Synchronization succeeded!',
     syncError1: 'Sorry, synchronization encountered an error, please refer to',
@@ -383,6 +386,7 @@ const message = {
     remote: 'Serveur',
     system: 'Système',
     renderSuccess: 'Félicitations, le rendu est terminé et regardez en avant-première.',
+    renderError: 'Le rendu a échoué, veuillez vérifier si 127.0.0.1 dans le fichier hosts pointe vers localhost. Après avoir vérifié que la configuration est correcte, essayez de redémarrer l\'application.',
     syncWarning: 'Vous devez compléter la configuration pour synchroniser !',
     syncSuccess: 'La synchronisation a réussi !',
     syncError1: 'Désolé, la synchronisation a rencontré une erreur, veuillez vous référer à',
@@ -507,6 +511,7 @@ const message = {
     remote: 'リモート',
     system: 'システム',
     renderSuccess: 'レンダリングは完成しました、プレビューしてください。',
+    renderError: 'レンダリングに失敗しました。hostsファイルの127.0.0.1がlocalhostを指しているかどうかを確認してください。構成が正しいことを確認した後、アプリケーションを再起動してみてください。',
     syncWarning: 'サイトを同期化する前に、システムの配置を完成してください！',
     syncSuccess: 'サイトの同期化は完成しました！',
     syncError1: '同期化の途中でエラーが発生しました、ご確認ください。',

src/background.ts

@@ -32,6 +32,7 @@ function createWindow() {
     webPreferences: {
       webSecurity: false, // FIXED: Not allowed to load local resource
       nodeIntegration: true,
+      enableRemoteModule: true, // FIXED: 兼容 electron@11.0.1
     },
     // frame: false, // 去除默认窗口栏
     titleBarStyle: 'hiddenInset' as ('hidden' | 'default' | 'hiddenInset' | 'customButtonsOnHover' | undefined),
@@ -40,7 +41,7 @@ function createWindow() {
   if (process.platform !== 'darwin') {
     winOption.icon = `${__dirname}/app-icons/gridea.png`
   }
-  
+
   win = new BrowserWindow(winOption)
   win.setTitle('Gridea')
 

src/components/Main.vue

@@ -89,6 +89,7 @@
 </template>
 
 <script lang="ts">
+import { VNodeChildren } from 'vue'
 import { ipcRenderer, IpcRendererEvent, shell } from 'electron'
 import { Vue, Component } from 'vue-property-decorator'
 import axios from 'axios'
@@ -121,11 +122,11 @@ export default class App extends Vue {
   hasUpdate = false
 
   newVersion = ''
-  
+
   syncErrorModalVisible = false
 
   updateModalVisible = false
-  
+
   systemModalVisible = false
 
   updateContent = ''
@@ -137,7 +138,7 @@ export default class App extends Vue {
   get currentRouter() {
     return this.$route.path
   }
-  
+
   get sideMenus() {
     return [
       {
@@ -226,15 +227,34 @@ export default class App extends Vue {
     ga.event('Preview', 'Preview - start', { evLabel: this.site.setting.domain })
 
     ipcRenderer.once('html-rendered', (event: IpcRendererEvent, result: any) => {
-      this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
+      // this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
 
       ga.event('Preview', 'Preview - success', { evLabel: this.site.setting.domain })
 
       ipcRenderer.send('app-preview-server-port-get')
       ipcRenderer.once(
         'app-preview-server-port-got',
-        (portGotEvent: IpcRendererEvent, port: any) => {
-          this.openInBrowser(`http://localhost:${port}`)
+        (portGotEvent: IpcRendererEvent, port: number | string | null) => {
+          if (!port && typeof port !== 'number') {
+            this.$message.config({
+              top: '36px',
+            })
+            this.$message.open({
+              content: (h: Vue.CreateElement) => {
+                const errStyle = {
+                  display: 'inline-block',
+                  maxWidth: '800px',
+                }
+                return h('span', {
+                  style: errStyle,
+                }, `❌ ${this.$t('renderError')}` as any as VNodeChildren)
+              },
+              icon: '',
+            })
+          } else {
+            this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
+            this.openInBrowser(`http://localhost:${port}`)
+          }
         },
       )
     })
@@ -480,7 +500,7 @@ export default class App extends Vue {
     list-style-type: none;
     font-size: 14px;
     margin: 30px 20px;
-    
+
     ul,
     ol {
       margin: 20px 20px 10px;
@@ -493,14 +513,14 @@ export default class App extends Vue {
 
   /deep/ ul > li {
       display: table-row;
-      
+
       &:before {
         content:'\25CF';
         color: #fad849;
         padding-right: 10px;
         display: table-cell;
       }
-      
+
       + li:before {
         padding-top: 10px;
       }

src/server.ts

@@ -7,8 +7,13 @@ export default function initServer() {
   function listen(port: number) {
     server = app.listen(port, 'localhost').on('error', (err: NodeJS.ErrnoException) => {
       if (err) {
-        console.log(`Preview server port ${port} is busy, trying with port ${port + 1}`)
-        listen(port + 1)
+        if (err.message === 'getaddrinfo ENOTFOUND localhost') {
+          // Fixed: 修复渲染服务在找不到 localhost 时崩溃问题
+          console.log('\x1B[31m%s\x1B[0m', 'Localhost is not found so that the preview server is not working. Please check your hosts file and then restart the application.')
+        } else {
+          console.log(`Preview server port ${port} is busy, trying with port ${port + 1}`)
+          listen(port + 1)
+        }
       }
     }).on('listening', () => {
       app.set('port', port)