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
相关推荐
袁煦丞1 分钟前
管家婆远程开单自由飞!管家婆系统:cpolar内网穿透实验室第646个成功挑战
前端·程序员·远程工作
Dontla1 分钟前
前端V0介绍(Vercel推出的AI前端生成工具)
前端·人工智能
fury_1232 分钟前
vue3:trycatch里面可以在写一个trycatch吗
前端
怪只怪满眼尽是人间烟火2 分钟前
Linux端口监控脚本
运维·javascript
苏纪云9 分钟前
ES6~ES11新特性
前端·ecmascript·es6
阿金要当大魔王~~14 分钟前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
十铭忘16 分钟前
基于SAM2的眼动数据跟踪2
java·服务器·前端
hey_ner19 分钟前
页面PDF文件格式预览(不使用pdf.js)
前端·javascript
luckyPian20 分钟前
前端+AI:HTML5语义标签(一)
前端·ai·面试·html·html5·ai编程
普通码农21 分钟前
Vue3 + dom-to-image 实现高质量截图复制与下载功能
前端