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

问题描述

我正在尝试将 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 路由器，如何修复空白页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！