如果我使用带有电子 js 的 vue 路由器，如何修复空白页？

Posted 2023-02-22

【中文标题】如果我使用带有电子 js 的 vue 路由器，如何修复空白页？

【英文标题】：how to fix blank page if i am using vue router with electron js?

【发布时间】：2019-05-28 03:34:59

【问题描述】：

我正在尝试将 vue 路由器与 Electron JS 上的应用程序一起使用。如果我在渲染页面上使用路由器，那么路由器的工作就完成了。但我不明白如何转换到页面，例如 - 使用托盘的“设置”。尝试转换时会打开空白页面。 我已经准备了该项目的工作示例。此问题仅存在构建项目。在开发模式下一切正常。

这是我在 github 上的工作示例。请需要帮助。

git clone https://github.com/DmtryJS/electron-vue-example.git
cd electron-vue-example
npm install
npm run build
and run dist\win-unpacked\example_for_***.exe

我的 main.js 文件

'use strict'

import  app, protocol, BrowserWindow, Menu, ipcMain, Tray  from 'electron'
import  format as formatUrl  from 'url'
const electron = require('electron');
const path = require('path');

const isDevelopment = process.env.NODE_ENV !== 'production';

let imgBasePath;

if(isDevelopment) 
  imgBasePath = path.join('src','assets', 'img');
 else 
  imgBasePath = path.join(path.dirname(__dirname), 'extraResources', 'img');


let win;
let tray;
protocol.registerStandardSchemes(['app'],  secure: true )

const trayIcon = path.join(__static, 'img', 'icon.png');

function createWindow () 
  win = new BrowserWindow( 
    width: 800, 
    height: 600,
    icon: trayIcon
   )

  routeTo(win, "")

  win.on('closed', () => 
    win = null
  )
   //убрать меню
   win.setMenuBarVisibility(true)

   win.on('show', function() 
   tray.setHighlightMode('always')
   )

   win.on('hide', function() 
     tray.setHighlightMode('never')
   )


// Quit when all windows are closed.
app.on('window-all-closed', () => 
  if (process.platform !== 'darwin') 
    app.quit()
  
)

app.on('activate', () => 
  if (win === null) 
    createWindow()
  
)

app.on('ready', () => 
  createWindow()
  win.webContents.openDevTools(); //открыть dev tools
  createTray()
)

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) 
  if (process.platform === 'win32') 
    process.on('message', data => 
      if (data === 'graceful-exit') 
        app.quit()
      
    )
   else 
    process.on('SIGTERM', () => 
      app.quit()
    )
  


function createTray()

  let traiIconPath = path.join(imgBasePath, 'preloader_tray_icon.png')
  tray = new Tray(traiIconPath)

  const contextMenu = Menu.buildFromTemplate(
    [ 
      
        label: 'Settings', 
        type: 'normal',

        click: function() 
        
          routeTo(win, "/settings")
          let contents = win.webContents

          contents.on('dom-ready', function()
          
            if(!win.isVisible())
            
              showWindow()
            
          )   
        
      ,

      
        label: 'Exit', 
        type: 'normal', 

        click: function() 
        
          win = null
          app.quit()
        
      
    ])

  tray.setContextMenu(contextMenu)

  tray.on('click', function() 
  toggleWindow();
)


function showWindow() 
  var position = getPosition();
  win.setPosition(position.x, position.y, false)
  win.show()
  win.focus()


ipcMain.on('routerEvent', function(event, arg) 
  routeTo(win, arg)
)

function routeTo(win, to) 
  if (isDevelopment) 
    win.loadURL(`http://localhost:$process.env.ELECTRON_WEBPACK_WDS_PORT` + to)
   else 
    win.loadURL(formatUrl(
      pathname: path.join(__dirname, 'index.html' + to);,
      protocol: 'file',
      slashes: true
    ))
  

并且 路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from './../views/Main.vue'
import Settings from './../views/Settings.vue'

Vue.use(Router)

export default new Router(
  //mode: 'history',
  routes: [
    
      path: '/',
      name: 'home',
      component: Main
    ,
    
      path: '/settings',
      name: 'settings',
      component: Settings
    
  ]
)

【参考方案1】：

您需要将created添加到主Vue应用检查docs

// src/main.js

new Vue(
  router,
  render: h => h(App),
  created() 
    // Prevent blank screen in Electron builds
    this.$router.push('/')
  
).$mount('#app')

【讨论】：

使用 Node 16.13.1、Npm 8.1.2、Yarn 1.22.15、VueCLI 4.5.15 - 我可以“vue create myapp”、“vue add vuetify”和“vue add electron-builder” ' 没有问题。但是当作为一个内置的电子应用程序运行时，路由器似乎失败了，我得到了 OP 描述的空白页面。在这个答案中添加 Created() 逻辑可以解决问题。

【参考方案2】：

我的解决方案是删除 vue 路由器中的历史模式。

【讨论】：

谢谢，这解决了我的问题。我试图在电子应用程序内的 Vue 组件中使用mounted。它在开发模式下运行良好，但在构建之后，mounted 中的代码将无法执行。从路由器中删除历史模式解决了这个问题。以防万一其他人用谷歌搜索这个。

也解决了我的问题！谢谢！

【参考方案3】：

抱歉，经过一天的谷歌搜索，我刚刚找到了解决方案。原来是这样的

 win.loadURL(formatUrl(
      pathname: path.join(__dirname, 'index.html' + to);,
      protocol: 'file',
      slashes: true
    ))

我删除了formaUrl，一切正常

win.loadURL(path.join(__dirname, 'index.html' + to));

【参考方案4】：

对我来说，解决方案是这样的：

检查应用程序是否在这样的地址运行：

本地：http://x86_64-apple-darwin13.4.0:8080/ 网络：http://localhost:8080/

检查您是否可以在浏览器中访问 x86_64..url。如果您没有看到网页但可以从 localhost 看到它，则将 127.0.0.1 映射到 hosts 文件中的 x86_64-apple-darwin13.4.0。在 mac 中它位于 /etc/hosts 在 windows 中它在 system32/drivers/etc 中。