Vuejs DevTools 未在开发人员工具中显示面板

Posted 2023-02-22

【中文标题】Vuejs DevTools 未在开发人员工具中显示面板

【英文标题】：Vuejs DevTools not showing panel in developer tools

【发布时间】：2020-10-08 23:15:12

【问题描述】：

我无法让 vue 开发工具显示它的面板。

我尝试删除并重新安装扩展程序，硬刷新，关闭工具并再次打开，添加Vue.config.devtools = true; 和所有这些的组合，它仍然不显示面板。有什么想法吗？

我确实注意到__VUE_DEVTOOLS_GLOBAL_HOOK__ 没有 Vue 值...但我没有可用的开发工具来查看是否应该是其他值。

macOS Catalina（版本 10.15.5）

版本 83.0.4103.106（官方版本）（64 位）

【问题讨论】：

您是否也关闭了浏览器并重新启动它？

可能是一个错误 crbug.com/1093731 已在 Chrome Canary 中修复，您可以单独安装。

是的@T.Woody 我做了所有令人耳目一新的步骤等。

感谢@wOxxOm 提供的链接。

请在下面查看我的问题的解决方案。

【参考方案1】：

更新：原来 devTool github repo 有一个更好的答案：

const app = new Vue(vueConfig).$mount('#app');
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;

请看这里：https://github.com/vuejs/vue-devtools

---

事实证明，这是一个导致问题的解决方法。我的笑话测试不适用于我的普通 vue 实例，所以我不得不用 createLocalVue 模拟它。

const localVue = createLocalVue();

localVue.use(VueRouter);

const router = new VueRouter();

问题是一些测试不喜欢我有两个带有路由器的 vue 实例（main.js 中的那个）。

所以我添加了仅在不是测试时才添加路由器的逻辑：

import Vue from 'vue';
import VueRouter from 'vue-router';

if (!process || process.env.NODE_ENV !== 'test') 
    Vue.use(VueRouter);


const router = new VueRouter(
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
);

const vueConfig = 
    render: (h) => h(App),
;

// excluding for jest tests
if (!process || process.env.NODE_ENV !== 'test') 
    vueConfig.router = router;


new Vue(vueConfig).$mount('#app');

不幸的是，Vue.use() 周围的 if 破坏了它：

// removing this if() fixed it and the vue dev tools panel now shows up.
if (!process || process.env.NODE_ENV !== 'test') 
    Vue.use(VueRouter);

关于开发工具初始化需要安装路由器的方式。我也想知道他们是否使用带有“测试”或其他东西的过程。不管怎样，这对我来说已经解决了。希望它可以帮助别人。

【参考方案2】：

我遇到了同样的问题，并且能够通过避免 vue.min.js 来解决开发目的。使用原始版本 (vue.js) 而不是缩小版本。

【讨论】：

但是我该怎么做呢？

你是如何使用 Vue 的？ - npm 或 CDN 链接！如果您使用的是 CDN，请在脚本标签内使用。作为<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>