Vue.js Vue开发工具中未显示的组件_Vue.js

Vue.js Vue开发工具中未显示的组件

vue.js

Vue.js Vue开发工具中未显示的组件,vue.js,Vue.js,有没有人遇到过这个问题？我正在使用Vue Devtools，但无法检查任何组件，因为没有显示任何组件。没有根组件或任何东西。几乎只是一个空白的开发工具。我是Vue的新手，所以我肯定我错过了一些明显的东西。我正在使用webpack cli模板，还没有实现任何Vue路由器。搜索组件时也不会出现任何结果。我猜这3个文件里有什么 main.js import Vue from 'vue' import App from './App' var db = firebase.database(); var

有没有人遇到过这个问题？我正在使用Vue Devtools，但无法检查任何组件，因为没有显示任何组件。没有根组件或任何东西。几乎只是一个空白的开发工具。我是Vue的新手，所以我肯定我错过了一些明显的东西。我正在使用webpack cli模板，还没有实现任何Vue路由器。搜索组件时也不会出现任何结果。我猜这3个文件里有什么

main.js

import Vue from 'vue'
import App from './App'
var db = firebase.database();

var vm = new Vue({
  el: '#app',
  created: function() {
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      console.log(snapshot.val());
      vm.quizzes = snapshot.val();
    });
  },
  data: function() {
    return {
        authenticated: false,
        quizzes: {},
        resources: []
    }
  },
  template: '<App/>',
  components: { App }
})

从“Vue”导入Vue
从“./App”导入应用程序
var db=firebase.database（）；
var vm=新的Vue({
el:“#应用程序”，
已创建：函数（）{
//导入firebase数据
var quizzesRef=db.ref（“测验”）；
quizzesRef.on（'value'，函数（快照）{
console.log（snapshot.val（））；
vm.quizzes=snapshot.val（）；
});
},
数据：函数（）{
返回{
认证：假，
测验：{}，
资源：[]
}
},
模板：“”，
组件：{App}
})

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info></resource-info>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>


从“./components/Navbar”导入导航栏
从“./components/ResourceInfo”导入ResourceInfo
导出默认值{
名称：“应用程序”，
组成部分：{
导航栏，
资源信息
}
}

Index.html（省略标题）


//初始化Firebase
变量配置={
apiKey:“，
authDomain:“”，
数据库URL:“”，
storageBucket:“”，
messagingSenderId:“
};
firebase.initializeApp（配置）；

我看到您正在使用

vue cli

，我假设它正在开发模式下运行（

npm run dev

）

显然，在您使用

npm run build

构建生产应用程序并从

dist

文件夹提供服务后，它将无法工作

假设您已经解决了上述问题，您最近是否在Chrome中安装了

Vue.js devtools

？如果是这样，您的浏览器可能需要重新启动。我想当我第一次安装Vue devtools时，我必须这么做

在所有这些之后，您应该开始在开发人员工具的“Vue”选项卡中看到您的组件。对于某些组件，您可能会看到匿名组件，但您所需要的只是

名称：app

，这是您已经在app.vue组件中执行的操作。

我也遇到了同样的问题！找不到太多的帮助，但这对我很有用：

将节点_ENV:“生产”的webpack.config.js设置更改为节点_ENV:“开发”

看起来似乎太明显了，但渲染的Vue应用程序却像魔术一样展示了所有对象的优点

我也有同样的问题，下面是我解决这个问题的方法：

确保

允许访问chrome扩展名设置（chrome://extensions
）已启用。重新启动Chrome
在页面上打开Vue组件后，打开Vue DevTools扩展并单击右上角的刷新按钮
我希望这对某人有所帮助。
您正在从http服务器提供文件，对吗？Vue开发工具无法使用基于文件的服务。我使用的是npm run dev。您使用的是哪个浏览器？我在维瓦尔第身上就有这种行为，但它在纯铬上也能起作用。。。我正在把它发布到vuedevtools和Vivaldi小组。。。
<body>
    <div id="app" class="container-fluid"></div>
    <!-- built files will be auto injected -->
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        messagingSenderId: ""
      };
      firebase.initializeApp(config);
    </script>
</body>