为什么Vue.js Chrome Devtools无法检测到Vue.js?

vue.js Vue.js

老丝Tony

2020-03-12

我有一个简单的工作Vue.js应用程序的以下代码。但是vue.js devtools没有响应。几天前它运行良好,现在不再运行,可能是哪里出了问题?当我转到https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd时,它说它已经被添加了。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>

  <title>Document</title>
</head>
<body>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

<script>
  let data = {
    message: 'Hello World'
  }

  new Vue({
    el: '#application',
    data: data
  })
</script>
</body>
</html>

第1051篇《为什么Vue.js Chrome Devtools无法检测到Vue.js?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
梅古一 2020.03.12

如果您已经Allow Access to file URLschrome://extensions/->中打开Vue Devtools,但仍然无法使用,请尝试重新安装Vue Devtools,可能对您有用。

路易米亚 2020.03.12

我解决了同样的问题。但是在我的情况下,Vue.js Chrome Devtools无法检测到Vue.js,因为html文件中<script src="https://unpkg.com/vue"/>

我将其替换为<script src="https://unpkg.com/vue"></script> Now Chrome Devtools正在完美检测Vue.js。

感谢上面的例子。我使用vue@2.4.4并通过以下方式打开我的html: file://

蛋蛋阿飞小小 2020.03.12

在chrome浏览器的extensions文件夹中,在vue devtools扩展的details选项卡下,选中允许访问文件URL的框,这对我有用。

前端LEYLEY 2020.03.12

出现了相同的问题,并通过添加解决了

Vue.config.devtools = true;

在Vue.js导入脚本之后,然后看看chrome devtools。您将看到一个名为的选项卡,Vue用于检查您的vue实例。

参考:https : //vuejs.org/v2/api/#devtools

村村西里 2020.03.12

要解决此问题,只需转到chrome://extensions/,向下滚动到Vue.js devtools并通过单击其复选框启用“ 允许访问文件URL ”。

来源:https : //github.com/vuejs/vue-devtools/issues/236

达蒙Eva 2020.03.12

您也可以使用Vue配置禁用:https : //vuejs.org/v2/api/#devtools

蛋蛋西里 2020.03.12

如OP 所述,一种替代方法是设置本地Web服务器
另一个-IMHO速度更快且骚扰更少-是让扩展程序可以访问文件URL,该URL默认情况下处于禁用状态。

只需转到chrome://extensions并保留Vue.js devtools 的“ 允许访问文件URL ”复选框。

来源:
https : //github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
http://codersdeck.com/vue-js-2-setting-vue-devtools/

老丝Tony 2020.03.12

我找到了答案,我在计算机上查看了一个纯HTML文件,这使vue.js工具无法加载。我加载了本地xampp服务器,并再次从本地计算机服务器url运行了该应用程序,现在vue.js devtools可以运行了!:)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android