问题描述
我想创建具有切换开发人员工具功能(如 vscode)的电子应用程序,您可以从 vscode 菜单中查看:help > toggle developer tools
我正在尝试创建可以从电子菜单栏/导航栏访问的相同工具,但程序显示以下错误:
TypeError: browserWindow is not a constructor
at VueComponent.openDevtools (Navbar.vue?601a:37)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at invoker (vue.runtime.esm.js?2b0e:2179)
at eval (link.js?aa59:216)
at Array.forEach (<anonymous>)
以下是我到目前为止所尝试的。
<template>
<div>
<b-navbar toggleable="sm" type="dark" variant="info">
<b-navbar-nav>
<b-nav-item v-on:click="visitWiki">Wiki</b-nav-item>
<b-nav-item-dropdown text="Help">
<b-dropdown-item v-on:click="visitIssues">Report Issue</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item v-on:click="openDevtools">Tools</b-nav-item>
</b-navbar-nav>
</b-navbar>
</div>
</template>
<script>
import Vue from 'vue'
import { BNavbar,BNavbarNav,BNavItem,BNavItemDropdown,BDropdownItem } from 'bootstrap-vue'
let shell = require('electron').shell
Vue.component('b-navbar',BNavbar)
Vue.component('b-navbar-nav',BNavbarNav)
Vue.component('b-nav-item',BNavItem)
Vue.component('b-nav-item-dropdown',BNavItemDropdown)
Vue.component('b-dropdown-item',BDropdownItem)
export default {
name: 'Navbar',methods: {
visitWiki() {
shell.openExternal('https://github.com/dhanyn10/multiple-file-manager/wiki')
},visitIssues() {
shell.openExternal('https://github.com/dhanyn10/multiple-file-manager/issues')
},openDevtools() {
const { browserWindow } = require('electron')
const win = new browserWindow({width: 1024,height: 400})
win.webContents.openDevTools()
}
}
}
</script>
我用 vue-cli-plugin-electron-builder 构建我的程序 我的 package.json
...
"dependencies": {
"bootstrap": "^4.4.1","bootstrap-vue": "^2.17.3","core-js": "^3.6.4","vue": "^2.6.12"
},"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.4","@vue/cli-plugin-eslint": "~4.3.0","@vue/cli-service": "~4.3.0","babel-eslint": "^10.1.0","electron": "^12.0.2","electron-icon-builder": "^1.0.2","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","vue-cli-plugin-electron-builder": "^1.4.6","vue-template-compiler": "^2.6.12"
},...
您可以在此处访问有关我的计划的更多信息https://github.com/dhanyn10/multiple-file-manager
解决方法
解决了,我从其他论坛得到答案并找到解决方案。
//toggle devtools
let remote = require('electron').remote
remote.getCurrentWindow().toggleDevTools()
您可以在此处查看更多详细信息:https://github.com/dhanyn10/multiple-file-manager/pull/147