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

Question

我正在尝试在Google Chrome中启用vue-devtools.但我无法启用它.我在Laravel应用程序中使用vue.js.

我的服务器使用php artisan serve命令运行.

Answer 1

I was seeing the error message in this question's title and this solution worked for me:

Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).

Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.

Below is what the changes looked like in my project:

Answer 2

2022 年 8 月更新
因此显然正如 @kissu 所说，下面的答案会导致发布的代码成为未经优化的代码。如果您想在检查生产代码的同时能够检查 Vue 开发工具，这可能与您想要的不同。

请注意这一点。除非您不介意检查未优化的捆绑包中已发布的代码，否则以下脚本就可以了。如果您不喜欢Vue.config.devtools静态值，那么可能是时候考虑env变量或类似的东西了。

以下是如何在 Vue 中设置环境变量

Vue CLI 3.x 的替代答案
除了 @NathanWailes 所说的之外，这是一个替代方案，它允许开发工具通过scripts而不是将其写入您的主 Vue 条目（通常是main.js或index.js）。

您只需将此脚本添加到package.json

scripts: {
   "start:dev": "vue-cli-service build --mode=development"
}

解释
这是因为在生产模式下默认Vue.config.devtools设置为此GitHub Issuefalse中所述。但这有一个解决方法，只需使用文档中提供的标志即可。--mode=development

然后您可以运行npm run start:dev并检查文件夹中的文件dist/！;)

Answer 3

1. 如果页面使用Vue.js的生产/缩小版本,则默认情况下禁用devtools检查,因此Vue窗格不会显示.
2. 要使其适用于通过file://协议打开的网页,您需要在Chrome的扩展程序管理面板中选中此扩展程序的"允许访问文件网址".
3. 我不得不重新启动chrome,它起作用了:-)

Answer 4

如果您使用 CDN；确保您没有使用库的生产（缩小）版本。

使用： https : //unpkg.com/vue@2.4.4/dist/vue.js

而不是： https : //unpkg.com/vue@2.4.4/dist/vue.min.js

您可能需要这样做Ctrl+Alt+I才能让它第一次出现。（来源）

Answer 5

您可以使用 vue.js 的开发版本。例如，在这里获取它： https: //unpkg.com/vue@2.3.2