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

【问题标题】：how to fix blank page if i am using vue router with electron js?如果我使用带有电子 js 的 vue 路由器，如何修复空白页？
【发布时间】：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_stackoverflow.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
    }
  ]
})

【问题讨论】：

标签： vue.js webpack electron vue-router

【解决方案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 中。

【讨论】：