vue3 + electron 解决 vue-devtools无法安装
时间: 2023-09-16 19:08:01 浏览: 68
你可以尝试以下步骤来解决 vue-devtools 无法安装的问题:
1. 首先,确保你已经按照官方文档安装了 vue-cli-plugin-electron-builder 插件,这是构建 Electron 应用的必要插件。
2. 然后,安装 vue-devtools 的最新版本:npm install -D @vue/devtools。
3. 接下来,在 Vue 项目的入口文件中添加以下代码:
```
import { createApp } from 'vue'
import App from './App.vue'
if (process.env.NODE_ENV === 'development') {
const { createRenderer } = require('@vue/runtime-dom')
const renderer = createRenderer({
querySelector: selector => document.querySelector(selector),
createElement: (tag, isSVG, is, props) => document.createElement(tag),
insert: (child, parent, anchor) => {
parent.insertBefore(child, anchor || null)
},
patchProp: (el, key, prevValue, nextValue) => {
el.setAttribute(key, nextValue)
},
forcePatchProp: (_, key) => key === 'value'
})
const root = renderer.createApp(App).mount('#app')
// 开发环境下开启 Vue Devtools
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = root.constructor
} else {
createApp(App).mount('#app')
}
```
4. 最后,在浏览器中打开 vue-devtools,点击 Setting -> Connection,设置 Host 为 localhost,Port 为 Electron 应用监听的端口号,一般默认为 5858,点击 Apply 即可。
希望以上步骤能够帮到你解决问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)