Electron-Vue学习篇—1、electron-vue项目打包后打开新窗口空白

一、场景描述

在本地运行electron-vue项目时，打开新窗口有显示内容，但经过打包之后，重复同样的操作，新窗口空白，打开Developer Tools，提示"DevTools was disconnected from the page"

二、解决思路

出现"DevTools was disconnected from the page"的提示，说明该页面没有被找到，那就是页面的路径配置错误

1、查看路由配置，采用的是hash模式，这没问题

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

2、查看background.js，发现只配置了开发环境的窗口路径，没有配置打包后的窗口路径

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    await imageWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/image')
    await searchWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/index')
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')

  }

三、解决

补充上窗口路径即可

if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    await imageWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/image')
    await searchWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/index')
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
    imageWindow.loadURL('app://./index.html#/image')
    searchWindow.loadURL('app://./index.html#/index')

  }