页面开发提效的神器：自动打开 IDE 并将光标定位至 DOM 的源代码位置

code-inspector-plugin使用时的问题：可能会导致项目打包后无法自动结束进程
解决方法：

"build:test": "cross-env NODE_RUN_BUILD=true vue-cli-service build --mode test",
// 判断是不是打包时
if (!process.env.NODE_RUN_BUILD) {
      config.plugin('code-inspector-plugin').use(
        codeInspectorPlugin({
          bundler: 'webpack',
          hotKeys: ['ctrlKey', 'shiftKey']
        })
      )
    }

先看使用效果：

在webpack使用Code Inspector插件

使用方法

// vue.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');
chainWebpack(config) {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
        hotKeys: ['ctrlKey', 'shiftKey']
      })
    )
}

支持的脚手架工具

在vite使用：vite-plugin-vue-inspector插件

在vue2中的使用方法

// for Vue2
import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [
    createVuePlugin(),
    Inspector({
      vue: 2
    }),
  ],
})

在vue3中的使用方法

// for Vue3

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Inspector from 'unplugin-vue-inspector/vite'

export default defineConfig({
  plugins: [Vue(), Inspector({
      enabled: true,
      toggleButtonVisibility: 'always',
      launchEditor: 'code',
    })],
})