当我运行我的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所有者能够提供更多关于为什么会发生这种情况以及如何确切修复它的见解,那就太好了。
3条答案
按热度按时间58wvjzkj1#
对于我的情况,转到Chrome的
More Tools > Extensions > Vue.js devtools > Details
,并打开Allow access to file URLs
选项。最后,它再次为我工作。yptwkmov2#
检查本地.env文件https://cli.vuejs.org/guide/mode-and-env.html#environment-variables中是否没有明确定义的模式
NODE_ENV
有了它,就可以完全解释你正在经历的行为,以及为什么它在其他机器上按预期工作。
bhmjp9jg3#
安装Vue force dev扩展。