definePage 导致devtools进行错误解析

[puyahwkl]

我的新手， 使用npm create vuetify@latest构建的项目， 使用npm install vite-plugin-vue-devtools@latest安装了devtools， 当我在页面级组件中使用import { definePage } from "unplugin-vue-router/runtime";这个导入语句， 以及这个代码进行路由权限控制时

definePage({
  meta: {
    requiresAuth: true,
  },
});

会导致浏览器报这样的错误

不管这两段代码是否被注释掉，只要有 definePage 关键字出现就会触发这个错误 ，不知道这个该怎么解决

下面这个是我在router/index.tx中添加的代码

// Composables
import { createRouter, createWebHistory } from "vue-router/auto";
import { setupLayouts } from "virtual:generated-layouts";
import { routes } from "vue-router/auto-routes";

import { useAuthStore ,useSnackbarStore} from "@/stores/authStore"; // 引入 authStore
// 全局前置守卫
router.beforeEach((to, from, next) => {
  
  const  authStore = useAuthStore(); // 现在在路由准备好后初始化  
  
  const snackbarStore = useSnackbarStore(); // 新增
  const requiresAuth = to.meta.requiresAuth; // 检查目标路由是否需要认证

  if (requiresAuth && !authStore.isAuthenticated) {
    // 如果目标路由需要认证且用户未认证，重定向到首页
 snackbarStore.showMessage('请先进行权限认证！');
    next("/");
  } else {
    // 否则继续导航
    next();
  }
});