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 был еще лучший ответ:

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) с маршрутизатором.

Итак, я добавил logi c, чтобы добавить маршрутизатор только в том случае, если это не тест:

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');

К сожалению, if вокруг Vue .use () - это то, что сломало его:

// 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) вместо версии minify.