Vue Devtools 在本地不工作

Question

Vue Devtools 适用于所有 demos/examples 在线但不适用于我的本地页面。即使有以下内容，Vue Devtools 图标仍然是灰色的 ("Vue.js not detected")。为什么？

<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>

Answer 1

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

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

Answer 2

你在那里使用的 Vue 源代码对我来说看起来是最小化/生产构建。您需要使用非最小化/non-production 构建。请尝试 https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js。

此外，如果您正在使用本地文件，即访问像 file://... 这样的页面，那么在 Chrome 的扩展程序管理面板中为该扩展程序 "you need to check "允许访问文件 URL”。 “参见 https://github.com/vuejs/vue-devtools

Answer 3

您可以先刷新浏览器试试

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

如果至少一个文件被压缩用于产品，devtools 将不会显示

Vue Devtools 在本地不工作

Vue Devtools not working locally

vue.js

vuejs2

vue-devtools