feat: ✨ 集成 vite-plugin-vue-devtools 插件

集成 vite-plugin-vue-devtools 插件，配置插件可通过 inspector 在 vscode 打开相应的组件

package.json

@@ -109,6 +109,7 @@
     "vite": "^5.2.8",
     "vite-plugin-mock-dev-server": "^1.5.0",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-devtools": "^7.1.2",
     "vue-tsc": "^2.0.13"
   },
   "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",

vite.config.ts

@@ -21,6 +21,9 @@ import {
   devDependencies,
 } from "./package.json";
 
+// https://devtools-next.vuejs.org/
+import VueDevTools from "vite-plugin-vue-devtools";
+
 /** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示 */
 const __APP_INFO__ = {
   pkg: { name, version, engines, dependencies, devDependencies },
@@ -125,6 +128,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         // 指定symbolId格式
         symbolId: "icon-[dir]-[name]",
       }),
+      VueDevTools({
+        openInEditorHost: `http://localhost:${env.VITE_APP_PORT}`,
+      }),
     ],
     // 预加载项目必需的组件
     optimizeDeps: {