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

Question

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

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

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

macOS Catalina（版本 10.15.5）

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

Answer 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);
}

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

Answer 2

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