Vue DevTools 中未显示组件答案

【问题标题】：Components not showing up in Vue DevToolsVue DevTools 中未显示组件
【发布时间】：2017-03-04 07:44:52
【问题描述】：

有人遇到过这个问题吗？我正在使用 Vue Devtools 但无法检查任何组件，因为没有出现。没有根组件或任何东西。几乎只是一个空白的 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>

【问题讨论】：

您从 http 服务器提供文件，对吗？ Vue DevTools 不适用于基于文件的服务。
我正在使用npm run dev。
您使用的是哪个浏览器？我在 Vivaldi 中得到了这种行为，但它在普通的 Chrome 中工作......我将它发布到 vuedevtools 和 Vivaldi 组......

标签： vue.js

【解决方案1】：

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

确保启用 chrome 扩展设置 (chrome://extensions) 中的 Allow access to file URLs。重启 Chrome。

打开Vue DevTools扩展，在页面打开一个Vue组件后点击右上角的刷新按钮。

我希望这对某人有所帮助。

【讨论】：

【解决方案2】：

我看到您正在使用vue-cli，我假设它正在开发模式下运行 (npm run dev)。

显然，在您使用npm run build 构建生产应用程序并从dist 文件夹提供服务后，它将无法工作。

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

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

【讨论】：

【解决方案3】：

我遇到了同样的问题！寻找帮助的地方不多，但这对我有用：

将 NODE_ENV: '"production"' 的 webpack.config.js 设置更改为 NODE_ENV: '"development"'

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

【讨论】：