問題描述

我正在嘗試將 vue 路由器與 Electron JS 上的應用程序一起使用.如果我在渲染頁面上使用路由器，那么路由器的工作就完成了.但我不明白如何轉換到頁面，例如 - 使用托盤的設置".嘗試轉換時會打開空白頁面.我已經準備了該項目的工作示例.此問題僅存在構建項目.在開發模式下一切正常.

I'm trying to use vue router with an application on an Electron JS. If I use a router on the render page, then the router work done. But I do not understand how to make the transition to the page, for example,- 'Settings' using the Tray. At attempt of transition the empty page opens. I have prepared a working example of the project. This problem exists only build project. In development mode all work well.

這是我在 github 上的工作示例.請需要幫助.

This is my work example on github. Please need help.

git clone https://github.com/DmtryJS/electron-vue-example.git
cd electron-vue-example
npm install
npm run build
and run distwin-unpackedexample_for_stackoverflow.exe

我的 main.js 文件

my main.js file

'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
    }
  ]
})

推薦答案

需要將created添加到主Vue app check 文檔

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')

這篇關于如果我使用帶有電子 js 的 vue 路由器，如何修復空白頁?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！