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

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

文章目录

1. 引入VueRouter4后的问题描述

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

shell 复制代码
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

ts 复制代码
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

json 复制代码
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
 
 //添加这一句
"preserveValueImports": false
相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript