vue3 + vite Cannot access ‘xxx‘ before initialization 组件热更新失败，es模块循环引用问题

最新推荐文章于 2025-06-27 09:09:26 发布

HHH 917

最新推荐文章于 2025-06-27 09:09:26 发布

阅读量1.9w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43245095/article/details/128442268

vue3 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了解决在使用Pinia进行状态管理时遇到的Vite热更新失败问题。问题源于在Pinia的model文件中重复引入了Vue Router，通过将静态引入方式改为在需要使用时动态获取Vue Router实例的方法解决了此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题原因

本人在 pinia stores 文件中使用了 router ，而main.ts 已经引入过router
main.ts

import { createApp } from "vue"
import { createPinia } from "pinia"

import App from "./App.vue"
import router from "./router" //已引入router

import "@/assets/tailwind/TaiWind.css"

const app = createApp(App)

app.use(createPinia())
app.use(router) 

app.mount("#app")

pinia 下 modelCache.ts 文件

import { defineStore } from "pinia"
import router from "@/router" //再次引入了 router

pinia 下 modelCache.ts 文件使用了router 并Model组件中引入了modelCache.ts 该文件这样导致es模块循环 vite热更新失败
在这里插入图片描述

解决

pinia 下 modelCache.ts 文件 router 引入方式改为函数引入
在使用actions里面函数需要用到router 再去 useRouter() 获取实例否则提前获取router为undefined；
因为 useRouter() 要在setup下使用

import { defineStore } from "pinia"
//import router from "@/router" 
import { useRouter } from "vue-router"

actions:{
	setModelBreadcrumbList(){
		const router = useRouter() 
	}
}