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
相关推荐
狗头大军之江苏分军6 分钟前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github
秃顶老男孩.11 分钟前
web中的循环遍历
开发语言·前端·javascript
快起来搬砖了20 分钟前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
龙在天31 分钟前
vue 请求接口快慢 覆盖 解决方案
前端
可子是我的小猫40 分钟前
【JS】模块(一)
javascript
跟橙姐学代码1 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_1 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou1371 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌1 小时前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_1 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js