解决浏览器中 vue-devtools 不显示的问题

来杯卡布奇洛

20800人浏览 · 2022-08-09 09:44:52

来杯卡布奇洛 · 2022-08-09 09:44:52 发布

解决浏览器中 vue-devtools 不显示的问题

- 问题
- 解决

问题

vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。

解决

出现这种情况，一般三种可能：

一种是 vue-devtools 的配置错误，我们需要进入到 vue-devtools 的详情页中，将“允许访问文件网址勾选起来”。
第二种情况是因为入口文件（main.js）中禁用了 vue 调试工具：Vue.config.devtools = false 把它设置为 true 即可。
第三种情况是项目使用了 externals 打包优化
- 可以在 index.html 和 vue.config.js 中看到如下代码
- 因为使用了 vue 的压缩版本，所以浏览器控制台默认不显示 vue 调试工具，可以在 index.html 中加个判断条件，开发环境时不使用压缩版本。

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

从需求到可执行工作项：MCP+Skill 让智能体规划真正落地

回顾整个体验，以前让智能体帮我拆需求，它是洋洋洒洒给我列了一大篇 Markdown，看着挺像那么回事，但最后还是得我一条条往 CodeArts Req 里搬，搬完再手动挂父子关系、排日期，拆需求五分钟，搬运两小时。现在好了，MCP 给智能体接上了"手"，Skill 给它装上了"项目经理的脑子"，一句话下去，34 个工作项连带排期、层级关系全给我建好了，甘特图一拉，齐刷刷都在两周内，节省了多少工作量

华为开发者空间

焕新鸿蒙应用权限管理方案，应用授权体验再升级

作为用户或应用开发者，或许经历过类似的体验场景：使用应用的过程中，触发应用某些功能会需要访问你的位置、麦克风、相机等常用权限，若为了保护隐私拒绝授权后，想要使用功能时，再次打开却找不到设置入口；或开启流程繁琐，需要经过频繁跳转和设置。这一问题不仅影响用户体验，还可能造成应用功能不可用、用户流失，也制约着应用的授权转化与留存表现，是行业普遍存在的体验痛点。