如何让Vue DevTools与inertia-vue3正常配合使用？

• 调整devtools配置的位置：
  你当前是在mount(el)之后设置vueApp.config.devtools = true，此时Vue实例已挂载完成，devtools配置不会生效。需要把配置移到挂载前：

  createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : appName,
    resolve: (name) => resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./Pages/**/*.vue'),
    ),
    setup({ el, App, props, plugin }) {
      const vueApp = createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(i18n)
  
      // 移到mount之前设置
      vueApp.config.devtools = true
  
      vueApp.mount(el)
    },
  })
  

• 确认环境变量生效：
  在代码中打印import.meta.env.MODE，确认输出为development。如果不是，检查.env文件是否放在项目根目录，或者Vite启动时是否误指定了生产模式（比如加了--mode production参数）。

• 检查浏览器扩展兼容性：
  确保安装的是Vue 3版本的DevTools扩展，Vue 2扩展无法识别Vue 3实例。同时在浏览器扩展设置里确认Vue DevTools处于启用状态，且允许在本地域名/文件协议下运行。

• 清空缓存并重启服务：
  清空浏览器缓存（尤其是本地存储），然后重启Vite开发服务器，缓存残留可能导致DevTools无法检测到Vue实例。

内容的提问来源于stack exchange，提问作者van_folmert