Vue Devtools 无法在本地运行答案

【问题标题】：Vue Devtools not working locallyVue Devtools 无法在本地运行
【发布时间】：2018-08-20 21:19:35
【问题描述】：

Vue Devtools 适用于所有在线演示/示例，但不适用于我的本地页面。即使有以下情况，Vue Devtools 图标仍然是灰色的（“未检测到 Vue.js”）。为什么？

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app"></div>
  <script>    
    Vue.config.devtools = true;
  </script>
</body>
</html>

【问题讨论】：

我无法重新创建它。什么浏览器？

标签： vue.js vuejs2 vue-devtools

【解决方案1】：

对我来说，您在那里使用的 Vue 源代码看起来已被最小化/生产构建。您需要使用非最小化/非生产构建。请改用https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js。

此外，如果您正在处理本地文件，即访问像 file://... 这样的页面，那么“您需要在 Chrome 的扩展程序管理面板中检查此扩展程序的“允许访问文件 URL”。”见https://github.com/vuejs/vue-devtools

【讨论】：

这也是我遇到的问题。启用该设置允许扩展按预期工作
他们应该将“允许访问文件 URL”设置为默认值。

【解决方案2】：

您必须添加至少 1 个 vue 实例，以便开发工具检测到它。所以，做：

new Vue({el: '#app'})

【讨论】：

【解决方案3】：

您可以先尝试刷新浏览器。

如果不起作用，请确保如果您正在编译 CSS 和 JavaScript 以对两者进行开发编译，而不是使用缩小文件进行生产编译

如果至少为 prod 压缩了一个文件，devtools 将不会显示

【讨论】：