vue3 调试工具vite-plugin-vue-devtools使用

使用VS Code编辑器，为了在浏览器内直接定位到页面代码，于是我找到了这个插件。话不多说，直接使用

示例

1. 在项目根目录下载依赖 vite-plugin-vue-devtools（vue3,vite版本3,低版本安装指定版本）

npm install vite-plugin-vue-devtools -D
# 或
yarn add vite-plugin-vue-devtools -D
# 或
pnpm add -D vite-plugin-vue-devtools

安装后package.json里面会多出这一行

image.png

2. 在项目config文件配置

import { defineConfig, loadEnv } from "vite";
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [
      VueDevTools({
        launchEditor: 'code'
      }),
    ],
  };
});

3. 配置完重启编辑器，启动项目，一般在浏览器的下方就可以看到了。