2024 Vue devTools又双叒叕出问题了,怎么解决?

今日,在写页面的时候,需要简单的查看一下Pinia的数据, 因为之前都是Edge写的,直接F12就用了。但是这一次我使用的是Chrome浏览器， 很快啊，开发者工具-> 扩展->扩展商场 一键下载。 啪的一声刺耳的汗毛直接竖起，Vue devtools有问题了。

可以看到Vue的logo已经亮起（开发模式哦，非生产） 打开F12但是devTools panel没有出现,不信邪的我,多次尝试。

点击右上角的Logo出现了，如下情况，我想我英文即使不好但是这几个单词我还是认识的， 再次尝试后Chrome devtool的vue devTools panel还是没有出现。 。

如此，我便开始了码农的日常 - 破Bug一打就是一天。

我尝试安装Edge，查看Edge的情况，发现Edge的devTools正常使用，没有异样。

我不甘心，我查看了Edge的chromium版本和Chrome的chromium版本，两个同属同一个大版本下。

我发现Vue devTools在同一台电脑同一个Vue devTools版本的情况下出现使用Bug，

我开始怀疑是Vue devTools版本的问题，发现两个浏览器都是6.6.3版本（文章发布时的最新版本）

我不信邪，将Edge正常使用的devTools的扩展打包，重新安装到Chrome上，发现Chrome依旧无法使用。

我尝试，如果最新版本有问题那么我降级呢，我尝试安装Vue devTools的5.5版本。但是依然没有用，因为5.5不支持最新的Vue3了。

此时我的Chrome扩展已经有了4个Vue devTools了😂

此时，我想到了的Github 我想这种问题总不会是我一个遇到的吧,我这种菜鸡,能遇到的问题都是大佬看不上的,随手解决的问题吧,因此我查看github是否有对应的解决方案

结果被我找到了几篇

• PSA 尤大亲自发话 向Vue3和vite开发者
• 相同问题的其他issue

最终我找到了适合我的解决方法

首先呢,如果是Vue3+vite开发者应使用 新一代的Vue devtools

用法呢,很简单,可以直接通过

npm add -D vite-plugin-vue-devtools

然后在vite.config文件中导入

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {join} from "path"
import vueJsxPlugin from "@vitejs/plugin-vue-jsx"; //Vue的tsx支持
import vueDevTools from 'vite-plugin-vue-devtools' //导入依赖

export default defineConfig({
    plugins: [
        vue(),
        vueJsxPlugin(),
        vueDevTools( //添选项
            {launchEditor: "webstorm"}
        ),
    ],

导入后的效果,就是在页面下方的正中心有个绿色的阴影,鼠标移入时,显示两个选项(如下图)

左边选项点开后如下:

右边的选项,点击后会显示对应的组件名称(仅Vue文件,tsx不支持),此时在页面上再次点击,则跳转到用户的代码编辑器组件对应的Vue文件上

但是打开本地编辑器是有顺序的,比如我当前使用的是WebStorm,但是我本地安装有VsCode那么按照默认打开顺序,会打开VsCode.

修改默认打开的编辑器也很简单,只需要在配置Vite的vueDevTools时传入选项launchEditor即可(如上文示例)

vueDevTools传入选项的参数如下

  {
    // 将导入附加到以 appendTos指定的属性 结尾的模块id，而不是将直接脚本添加到主体
    appendTo?: string | RegExp;
    
    // 启用 vue 组件检查器, 提供跳转至本地编辑器的功能
    componentInspector?: boolean | VitePluginInspectorOptions
    
    // 跳转的编译器,默认为VSCode 提供的选项有 'appcode' -> 'atom' -> 'atom-beta' -> 'brackets' -> 'clion' -> 'code' -> 'code-insiders' -> 'codium' -> 'emacs' -> 'idea' -> 'notepad++' -> 'pycharm' -> 'phpstorm' -> 'rubymine' -> 'sublime' -> 'vim' -> 'visualstudio' -> 'webstorm' -> 'rider'
    launchEditor: string
    
    // 废弃选项
    openInEditorHost: string | false

    // 废弃选项
    clientHost?: string | false
 }

更多API请访问 Vue devTools(Next) 官网 devtools-next.vuejs.org/plugins/api