Vue devtools 检查在本地托管应用程序上不可用

Bob*_*ers 5 google-chrome vue.js yarnpkg vue-devtools

当我运行 Vue 应用程序时,Vue devtools 扩展会检测到 Vue.js,但会抱怨:

Devtools 检查不可用,因为它处于生产模式或被作者明确禁用。

我在本地使用yarn serve运行的应用程序提供服务vue-cli-service serve

vue: 3.0.0
vue devtools: 6.0.12
@vue/vue-cli: 5.0.1
@vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome:  98.0.4758.102
Run Code Online (Sandbox Code Playgroud)

Vue 开发工具在以下情况下可以工作:

  • 另一个开发人员从干净的本地存储库在 Chrome 中运行该应用程序(与上述所有内容的版本相同)
  • 我在 Chrome 中创建并运行一个新的 Vue 应用程序 (vue create)

如果出现以下情况, Vue devtools不起作用(相同的错误消息):

  • 我从新的本地存储库运行我的应用程序
  • 我清除了 Chrome 中的所有浏览数据
  • 我添加vue.config.performance = true到我的main.ts文件中
  • 我添加--mode=development到我的vue-cli-service build命令中
  • 我使用 Edge (Chromium) 而不是 Chrome
  • 我将 vue 更新到 3.0.14
  • http://localhost:8080我通过主机文件别名访问该应用程序https://myalias:8080

AFAIK 我从未做过任何强制生产构建或禁用 vue devtools 的事情,所以我很困惑为什么它不能开箱即用。我缺少什么?

[更新]

  • .env 文件仅VUE_APP_*定义了变量。
  • Vue安装在本地(不使用CDN版本)。
  • vue.config.devtools 在 vue3 中不可用。vue.config.performance似乎是替代品。
  • 使用 Vue devtools beta (6.0.0.21) 没有帮助。

[更新 2] 我升级了项目中的所有匹配包,以匹配开发工具正在运行的新 Vue 应用程序中的版本。开发工具现在正在我的应用程序上运行,但我不知道哪个包升级起到了作用。如果 Vue 所有者能够更深入地了解发生这种情况的原因以及如何修复它,那就太好了。

qua*_*ine 0

NODE_ENV检查本地 .env 文件中 是否没有明确定义的模式https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

有了这个就可以完全解释您所经历的行为以及为什么它在其他机器上按预期工作。