Question

我正在尝试将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
    }))
  }
}

然后 router.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
    }
  ]
})

Answer 1

You need to add created to the main Vue app check docs

// src/main.js

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

Answer 2

抱歉，但是经过一天的谷歌搜索，我才找到了解决方案。事实证明是

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

我删除了formaUrl，一切正常

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

Answer 3

对我来说，解决方案是删除vue路由器中的历史记录模式。

Answer 4

对我来说解决方法是：

检查应用程序是否在以下地址运行：

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

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

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

4 个答案: