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

rhfm7lfc  于 2023-08-01  发布在  Go
关注(0)|答案(3)|浏览(129)

当我运行我的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

字符串
Vue devtools**在以下情况下有效:

  • 另一个开发人员在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 devtools beta(6.0.0.21)没有帮助。

[更新2]我升级了项目中所有匹配的包,以匹配开发工具正在工作的新Vue应用程序中的版本。开发工具现在可以在我的应用程序上工作了,但我不知道哪个软件包升级成功了。如果Vue所有者能够提供更多关于为什么会发生这种情况以及如何确切修复它的见解,那就太好了。

58wvjzkj

58wvjzkj1#

对于我的情况,转到Chrome的More Tools > Extensions > Vue.js devtools > Details,并打开Allow access to file URLs选项。最后,它再次为我工作。

yptwkmov

yptwkmov2#

检查本地.env文件https://cli.vuejs.org/guide/mode-and-env.html#environment-variables中是否没有明确定义的模式NODE_ENV
有了它,就可以完全解释你正在经历的行为,以及为什么它在其他机器上按预期工作。

bhmjp9jg

bhmjp9jg3#

安装Vue force dev扩展。

相关问题