vue3+ts 项目遇到的问题和bug

项目遇到的问题和bug"/>

vue3+ts 项目遇到的问题和bug

1.router中使用pinia报错

pinia.mjs:1709 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See .html for help.
This will fail in production.at useStore (pinia.mjs:1709:19)at index.ts:6:15

分析原因：因为在mian.js中，注册router总比pinia先，所以不能使用到store/index.js文件中createPinia方法

解决方法：把store实例化放到路由守卫函数里面

import { createRouter } from 'vue-router'
const router = createRouter({// ...
})// ❌ 由于引入顺序的问题，这将失败
const store = useStore()router.beforeEach((to, from, next) => {// 我们想要在这里使用 storeif (store.isLoggedIn) next()else next('/login')
})router.beforeEach((to) => {// ✅ 这样做是可行的，因为路由器是在其被安装之后开始导航的，// 而此时 Pinia 也已经被安装。const store = useStore()if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

参考：
添加链接描述
pinia

2.路由报错

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/"
warn @ vue-router.mjs:35
显示另外 1 个框架
收起

参考：

3.vue 样式穿透

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.

把::v-deep 替换为 :deep()

参考：