Vue3之与Vite5及VueRouter4整合时遇到问题及处理方法

Vue3之与Vite5及VueRouter4整合时遇到问题及处理方法

1. 引入VueRouter4后的问题描述

打开浏览器后，控制台出现下面问题

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=e60463b7' does not provide an export named 'RouteRecordRaw' (at routes.ts:1:9)

2. 解决方法

1. 解决方式1

第一种解决方式：引入的时候以类型的形式引入，前面添加 type

import type {RouteRecordRaw} from "vue-router"; //这里加入了type问题解决

export const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('@/views/Login.vue'),
        name: 'Login',
        meta: {
            title: '登录',
            icon: 'Lock',
            hidden: true
        }
    },
    {
        path: '/layout',
        component: () => import('@/layout/LayoutIndex.vue'),
        name: 'Layout',
        meta: {
            title: '首页',
            icon: 'Monitor',
            hidden: false
        },
        //当访问/layout路由时重定向到二级路由 /home
        redirect: '/home',
        children: [
            {
                path: "/home",
                component: () => import("@/views/HomeIndex.vue"),
                name: "Home",
                meta: {
                    title: '工作台',
                    icon: 'DataBoard',
                    hidden: false
                },
            }
        ]
    },
]

2. 解决方式2

第二种解决方式：找到根目录中的tsconfig.json文件，设置preserveValueImports：false

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
 
 //添加这一句
"preserveValueImports": false