Laravel + vue.js : vue devtools 只显示 <Root> 组件

Question

我最近 vue.js 有点问题，想知道是否有人可以帮忙？

我新安装了 laravel 7.3.3 和 vue.js 2.6.12 无法获取 vue devtools 扩展来显示我的组件、变量等

这就是开发工具的样子：

感谢您的帮助！

Answer 1

我的存储库也有类似的问题。我实际上并没有在全球范围内注册组件，而是制作组件并在需要的页面上注册它们。我的问题是因为我将 Vue 绑定到页面两次。一次在 app.js 中，然后再次在我的组件的自定义 JS 文件中。因此，我认为开发工具选择了错误的 Vue 实例。

我通过删除 app.js 文件中对 vue 的引用解决了我的问题，然后仅使用我的新 JS 文件绑定元素。所以我的 app.js 文件只包含

require('./bootstrap');

然后我有一个单独的文件，我将其包含在相关页面中，看起来有点像这样：

import Vue from 'vue';
import Axios from 'axios';
import StudentManagement from './StudentManagement.vue';


window.axios = Axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

new Vue({ // eslint-disable-line no-undef, no-new
    el: '#student-management',
    render: h => h(StudentManagement),
});

我怀疑您可能遇到类似的问题，即 Vue 实例被设置两次。

最简单的检查方法是在控制台，它会输出一条消息说 Vue 处于开发模式：

如您所见，消息旁边有一个2，表示该消息已输出两次。如果是这种情况，你只需要确保你只包含或设置你的 Vue 实例一次，开发工具应该拾取你的组件。

Laravel + vue.js : vue devtools 只显示 <Root> 组件

Laravel + vue.js : vue devtools only showing <Root> compenent

devtools

laravel

vue.js