在Vue DevTools中未显示的组件
有没有人遇到过这个问题？我正在使用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>回答 3
Stack Overflow用户
发布于 2018-12-07 00:24:50
我也遇到了同样的问题，下面是解决问题的方法：
确保启用chrome扩展设置(chrome://extensions)中的Allow access to file URLs。重新启动Chrome。
打开页面上的Vue组件后，打开Vue DevTools扩展并单击右上角的Refresh按钮。
我希望这对某些人有帮助。
Stack Overflow用户
发布于 2016-10-22 11:13:16
我看到您正在使用vue-cli，我假设它是在开发模式(npm run dev)下运行的。
显然，在使用npm run build构建生产应用程序并从dist文件夹提供服务后，它将无法工作。
假设你已经解决了上述问题，那么你最近在Chrome中安装了Vue.js devtools吗？如果是这样，您的浏览器可能需要重新启动。当我第一次安装Vue devtools时，我想我不得不这么做。
在这之后，你应该开始在开发者工具的"Vue“标签中看到你的组件了。您可能会看到一些组件的匿名组件，但您所需要的就是name: app，这是您在App.vue组件中已经在做的事情。
Stack Overflow用户
发布于 2017-05-29 23:03:13
我也有同样的问题！找不到太多的帮助，但这对我很有效：
将NODE_ENV：'"production"‘的webpack.config.js设置更改为NODE_ENV：'"development"’
看起来似乎太明显了，但是渲染的Vue应用程序就像魔术一样显示了所有对象的美好！
https://stackoverflow.com/questions/40186095
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号