一、场景描述
在本地运行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')
}