Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=9eef87ba‘

错误代码

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'

// 自定义属性类型检测
type RouterConfig = RouteRecordRaw & {
  hidden?: boolean // hidden属性非必填
  name?: string //string属性非必填
}

const routes: Array<RouterConfig> = [
  {
    path: '/about',
    name: 'about',
    hidden: true,
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

错误提示

浏览器中路由无法显示，提示错误

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=9eef87ba' does not provide an export named 'RouteRecordRaw'

问题描述

Volar: 'RouteRecordRaw' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

解决方法

import type {RouteRecordRaw} from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'

// 自定义属性类型检测
type RouterConfig = RouteRecordRaw & {
  hidden?: boolean // hidden属性非必填
  name?: string //string属性非必填
}

const routes: Array<RouterConfig> = [
  {
    path: '/about',
    name: 'about',
    hidden: true,
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router