Question

有没有人遇到过这个问题？我正在使用Vue Devtools，但无法检查任何组件上的任何组件都会出现。没有Root组件或任何东西。几乎只是一个空白的DevTools。我是Vue的新手，所以我确定我错过了一些明显的东西。我使用了webpack cli模板，还没有实现任何Vue Router的功能。搜索组件时也没有任何问题。我假设这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 }
})

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>

Index.html（略去标题）

<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>

Answer 1

我遇到了同样的问题，这是为我解决的问题：

确保启用Chrome扩展程序设置（Allow access to file URLs中的chrome://extensions。重新启动Chrome。

在打开页面上的Vue组件后，打开Vue DevTools扩展并单击右上角的“刷新”按钮。

我希望这对某人有帮助。

Answer 2

我看到你正在使用vue-cli，我认为它是以开发模式运行的（npm run dev）。

显然，使用npm run build构建生产应用并从dist文件夹提供后，它将无效。

假设您已完成上述操作，最近是否在Chrome中安装了Vue.js devtools？如果是这样，您的浏览器可能需要重新启动。当我第一次安装Vue devtools时，我想我必须这样做。

毕竟，你应该开始在＆＃34; Vue＆＃34;中看到你的组件。开发人员工具选项卡。对于某些组件，您可能会看到匿名组件，但您需要的只是name: app，这是您已经在 App.vue 组件中执行的操作。

Answer 3

我有同样的问题！没什么可以找到寻求帮助的，但这对我有用：

将NODE_ENV的webpack.config.js设置更改为：'“production”'到NODE_ENV：'“development”'

看起来几乎太明显，但渲染的Vue应用程序然后看起来像魔术显示所有对象的善良！

组件未显示在Vue DevTools中

3 个答案: