【问题标题】：Chrome extension vue-devtools not detecting VueChrome 扩展程序 vue-devtools 未检测到 Vue
【发布时间】：2018-03-09 14:43:32
【问题描述】：

未检测到我的<script src="https://cdn.jsdelivr.net/npm/vue"></script>

还有https://vuejs.org/v2/examples/commits.html 有<script src="/js/vue.js"></script>，当点击Chorme 的Vue 图标时说“未检测到Vue.js”

PS：使用here 描述的扩展名并假设github.com/vuejs/vue-devtools。

编辑：安装什么也没说，但您必须关闭并重新打开 Chorme。

好吧，在它一个新的问题之后，现在点击VueIcon消息是

在此页面上检测到 Vue.js。 Devtools 检查不可用，因为它处于生产模式或被作者明确禁用。

【问题讨论】：

这可能是一个愚蠢的问题，但是您安装了扩展程序吗？如果是这样，当您单击 vue 图标时，您会得到什么？另外，请确保更换
感谢@samayo，似乎是一种“第一次错误”，安装需要重新启动（但不是说需要它），看我的编辑
这仍然是一个问题。在 Chrome 扩展中使用 Vue，例如：chrome-extension://<hash>/app.html，导致Vue.config.devtools 为真，但devetools 未定义，导致每次重新加载时都会出现此消息：``` 下载 Vue Devtools 扩展以获得更好的开发体验： github.com/vuejs/vue-devtools ``` Vue devtools 按钮显示为灰色，点击时显示“未检测到 Vue.js”。重新加载 Chrome 无效。我正在创建一个 Vue 实例。
其他错误？正在检测页面 like this 上的 Vue，其中不存在 Vue。
它在 Chrome 上玩得不太好，以后我会用 Firefox :(

标签： vue.js

【解决方案1】：

我发现了这个简单的解决方法：

右键单击Vue图标并单击Manage extensions
向下滚动并启用Allow access to file URLs
重新启动 Chrome，一切都会好起来的。

注意：您可能需要通过在脚本开头添加此行来打开调试模式

Vue.config.devtools = true;

【讨论】：

【解决方案2】：

如果使用 Vue 3，您需要当前仍处于测试阶段的新版本扩展 https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

【讨论】：

这是我的问题，因为我使用的是 vue 3 CDN。我希望 V2 和 V3 的插件是可区分的，哈哈，但我想这并不重要。谢谢@Peter Kerr

【解决方案3】：

当初学者使用samayo 的答案不完整时。对于困惑的人来说，了解放置在某个位置的代码很重要。

导致问题的原因是您使用的是 CDN 中的 Vue.js。您应该在您的 xxx.js 文件中添加Vue.config.devtools = true; 代码 sn-p。例如：

例子.js

Vue.config.devtools = true;

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
})

参考：

https://github.com/vuejs/vue-devtools/issues/190

【讨论】：

嗨，天空，您不能重复其他答案：在发布您的答案之前，请检查它是否是新的。基本信息“Vue.config.devtools = true”在此页面中并不新鲜。
感谢您分享您的想法。我过去也遇到过同样的问题。其实上面的答案并没有直接指出代码应该放在哪里，Vue.config.devtools = true;代码sn-p在这个答案中并不重要。在我看来，对于困惑的人来说，解释问题的原因、巧妙的解决方案以及相关的参考链接是很重要的。
好的，为避免投票失败，请编辑您的答案以说出（明确地说，此处不作为评论）您的想法有所不同。重要的是还要引用最相似的答案，例如"...使用CDN时@samayo的回答不完整，您需要...".
感谢您的宝贵时间。你不仅在处理问题上帮了我很多忙，也让我加深了对问题的理解。让我们发展一个更好的精彩交流社区。span>

【解决方案4】：

根据您的编辑，答案是为 vue 开启调试模式为：

import Vue from 'vue'
Vue.config.devtools = true

这将允许您使用 devtools 查看/检查。只需确保在生产过程中将其关闭

【讨论】：

大家好，谢谢。我将尝试将此代码作为脚本中的第一行...但是请参阅@P3trur0 answer cmets 中“解决方案”的过程（抱歉在启动后更改了问题）

【解决方案5】：

我认为您使用的是 vue 的缩小版本，默认情况下 Vue.config.devtools = false，恕我直言，您最好使用非嵌套 CDN，例如 https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js

【讨论】：

【解决方案6】：

您看到此错误是因为您使用的是 vue 的缩小版本，它除了具有较小的尺寸外，还有一些生产就绪设置，包括 Vue.config.devtools = true，放非缩小版解决问题

【讨论】：

【解决方案7】：

为了使 vue-devtools 能够检测到您正在运行 Vue 应用程序，仅添加 Vue 库本身是不够的。确实，你必须至少创建一个 Vue 实例。

例如，以下内容被正确检测为 Vue 应用程序。

<html>
  <head>
    <title>Hello there</title>

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

  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // creating a root Vue instance here
      var vm = new Vue({el: '#app'});
    </script>
  </body>
</html>

【讨论】：

Hum... 我的页面是一个完整的 Vue 应用程序，请参阅我指向 vuejs.org/v2/examples/commits.html 的链接，这是另一个具有完整应用程序的网页示例。好吧，我将重新启动并重试。
现在改变了！至“在此页面上检测到 Vue.js。Devtools 检查不可用，因为它处于生产模式或被作者明确禁用。”
如果您使用 CDN，请确保您没有使用库的缩小版本（即：生产）。例如，试试这个：unpkg.com/vue@2.5.13/dist/vue.js
（是 UBUNTU F12 或 inspec）是的！现在我在检查中看到网络之后的最后一个选项作为选项。谢谢！
这仍然是一个问题。在 Chrome 扩展中使用 Vue，例如：chrome-extension://<hash>/app.html，导致Vue.config.devtools 为真，但devetools 未定义，导致每次重新加载时都会出现此消息：``` 下载 Vue Devtools 扩展以获得更好的开发体验： github.com/vuejs/vue-devtools ``` Vue devtools 按钮显示为灰色，单击时显示“未检测到 Vue.js”。重新加载 Chrome 无效。我正在创建一个 Vue 实例。