Javascript Vue开发工具未使用Vue Electron Builder加载

我正在创建一个Electron/Vue应用程序，无法在Electron应用程序窗口中加载Vue开发工具。这是我第一次在Vue中使用Electron，我不确定是否存在我不知道的依赖性问题

我遇到了Github问题，但我的Electron和vue cli插件Electron的版本更高，并且已经包含了正在讨论的更新代码

我还尝试了以下代码段（来自）：

win.loadURL（process.env.WEBPACK\u DEV\u SERVER\u URL）。然后（（）=>{
如果（！process.env.IS_TEST）{
setTimeout（（）=>win.webContents.openDevTools（），5555）
}
})

这使一切都破裂了

我尝试的最后一件大事是使用

vue invoke-electron-builder

重新调用生成器，这是在

然而，这个问题仍然存在。有人能看一下我的设置并告诉我是否有明显的问题吗

这是我的

包的一部分。json

：

“脚本”：{
“服务”：“vue cli服务服务”，
“生成”：“vue cli服务生成”，
“lint”：“vue cli服务lint”，
“开发”：“npm运行电子：服务”，
“electron:build”：“vue cli服务electron:build”，
“electron:serve”：“vue cli服务electron:serve”，
“postinstall”：“electron builder安装应用程序deps”，
“姿势安装”：“electron builder安装应用程序deps”，
“开始”：“电子”
},
“main”：“background.js”，
“依赖项”：{
“@tailwindcss/postss7 compat”：“^2.0.2”，
“自动刷新器”：“^9”，
“bcryptjs”：“^2.4.3”，
“核心js”：“^3.6.5”，
“电子”：“^12.0.5”，
“jsstore”：“^3.13.6”，
“邮政编码”：“^7”，
“tailwindcss”：“npm:@tailwindcss/postss7 compat@^2.0.2”，
“vue”：“^3.0.0”，
“vue路由器”：“^4.0.0-0”，
“vuex”：“^4.0.0-0”
},
“依赖性”：{
“@vue/cli插件巴别塔”：“~4.5.0”，
“@vue/cli插件eslint”：“~4.5.0”，
“@vue/cli插件路由器”：“^4.5.12”，
“@vue/cli插件vuex”：“^4.5.12”，
“@vue/cli服务”：“~4.5.0”，
“@vue/compiler sfc”：“^3.0.0”，
“@vue/eslint config prettier”：“^6.0.0”，
“babel eslint”：“^10.1.0”，
“电子”：“^11.0.0”，
“electron开发工具安装程序”：“^3.2.0”，
“eslint”：“^6.7.2”，
“eslint插件更漂亮”：“^3.3.1”，
“eslint插件vue”：“^7.0.0”，
“更漂亮”：“^2.2.1”，
“vue cli插件生成器”：“~2.0.0-rc.6”，
“vue cli插件随风”：“~2.0.6”
}

这是我的

background.js

文件：

“严格使用”；
从“electron”导入{app，protocol，BrowserWindow}；
从“vue cli插件electron builder/lib”导入{createProtocol}；
从“electron DEVTOOLS installer”导入installExtension，{VUEJS_DEVTOOLS}；
const isDevelopment=process.env.NODE_env！==“生产”；
让我们赢；
//在应用程序准备就绪之前，必须注册方案
协议.注册表SchemesSprivileged([
{scheme:“app”，特权：{secure:true，standard:true}，
]);
函数createWindow（）{
//创建浏览器窗口。
win=新浏览器窗口({
宽度：800，
身高：600，
网络首选项：{
//使用pluginOptions.nodeIntegration，别管它
//有关更多信息，请参阅nklayman.github.io/vue cli插件electron builder/guide/security.html#node integration
节点集成：process.env.ELECTRON\u NODE\u集成，
},
});
if（process.env.WEBPACK\u DEV\u SERVER\u URL）{
//如果处于开发模式，请加载开发服务器的url
loadURL（process.env.WEBPACK\u DEV\u SERVER\u URL）；
如果（！process.env.IS_TEST）win.webContents.openDevTools（）；
}否则{
createProtocol（“app”）；
//不在开发中时加载index.html
win.loadURL（“app://./index.html");
}
}
//关闭所有窗口后退出。
应用程序打开（“窗口全部关闭”，（）=>{
//在macOS上，应用程序及其菜单栏很常见
//在用户使用Cmd+Q明确退出之前保持活动状态
if（process.platform！=“darwin”）{
app.quit（）；
}
});
应用程序打开（“激活”，（）=>{
//在macOS上，当
//已单击停靠图标，并且没有其他窗口打开。
如果（BrowserWindow.getAllWindows（）.length==0）createWindow（）；
});
//此方法将在Electron完成后调用
//初始化并准备好创建浏览器窗口。
//某些API只能在此事件发生后使用。
app.on（“就绪”，异步（）=>{
if（isDevelopment&！process.env.IS_TEST）{
//安装Vue Devtools
试一试{
等待安装扩展（VUEJS_DEVTOOLS）；
}捕获（e）{
错误（“Vue Devtools未能安装：”，e.toString（））；
}
}
createWindow（）；
});
//在开发模式下，根据父进程的请求干净地退出。
if（ISD开发）{
如果（process.platform==“win32”）{
process.on（“消息”，（数据）=>{
如果（数据==“优雅退出”）{
app.quit（）；
}
});
}否则{
process.on（“SIGTERM”，（）=>{
app.quit（）；
});
}
}

不要使用超时，而是等待

dom ready

事件。我想这样设置会让一切正常

const{
应用程序，
浏览器窗口，
}=要求（“电子”）；
常数{
默认值：installExtension，
VUEJS_开发工具
}=要求（“电子开发工具安装程序”）；
const isDev=process.env.NODE_env==“开发”；
//保留窗口对象的全局引用，如果不保留，则窗口将
//当JavaScript对象被垃圾收集时，将自动关闭。
让我们赢；
异步函数createWindow（）{
//创建浏览器窗口。
win=新浏览器窗口({
宽度：800，
身高：600，
标题：“MyAppTitle”，
网络首选项：{
开发工具：isDev
}
});
//加载应用程序
loadURL（“index.html”）；
//只有在开发时才做这些事情
如果（isDev）{
//如果打开开发工具，则会引发错误
//在DOM发布之前