当前位置：首页 > news >正文

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

news 2025/9/12 3:05:59

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 https://pinia.vuejs.org/core-concepts/outside-component-usage.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 个框架
收起

参考：
https://blog.csdn.net/weixin_45952652/article/details/131192829

https://blog.csdn.net/m0_64344940/article/details/130710796

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()

参考：
https://blog.csdn.net/weixin_43405300/article/details/132099608

4.`defineProps` is a compiler macro and no longer needs to be imported

[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.

在这里插入图片描述
[@vue/compiler sfc]defineEmits是一个编译器宏，不再需要导入。

[@vue/compiler sfc]`defineProps’是一个编译器宏，不再需要导入。

文件里把这两个引用去掉即可

import { defineEmits, defineProps, computed } from 'vue'
改为
import {  computed } from 'vue'

5.前端什么时候使用formdata

学习项目时发现封装了一个上传hook：
用于上传表单数据，

import axios from "axios";function upload(path: string, userForm: any) {const params = new FormData()for (const i in userForm) {params.append(i, userForm[i])}// console.log(params)return axios.post(path, params, {headers: {"Content-Type": "multipart/form-data"}}).then(res => res.data)
}export default upload

那么new FormData()的作用是什么，为什么要用?

new FormData() 是 JavaScript 中的一个构造函数，用于创建新的 FormData 对象。FormData 对象用于存储键值对，并且可以模拟表单数据（表单元素和它们的值）的序列化。

需要发送二进制数据或大文件时，使用FormData非常有用

“Content-Type” 是一个 HTTP 请求头，它告诉服务器发送过来的数据是什么类型。在这种情况下，“multipart/form-data” 是一种编码类型，用于发送表单数据。这种编码类型常常用于发送包含文件上传的表单数据，因为它可以处理二进制数据和非文本数据。

常见的 Content-Type 头字段有以下几种：
application/json：用于表示 JSON 格式的数据。
application/xml：用于表示 XML 格式的数据。
text/plain：用于表示纯文本数据。
text/css：用于表示 CSS 样式表。
image/png、image/jpeg、image/gif 等：用于表示图片数据。
audio/mpeg、audio/mp3、audio/wav 等：用于表示音频数据。
video/mp4、video/webm、video/ogg 等：用于表示视频数据。
multipart/form-data：用于表示 Multipart/form-data 格式的数据，常用于文件上传。
application/x-www-form-urlencoded：用于表示 URL 编码的表单数据。

6.路由守卫中设置网页title

在这里插入图片描述
在路由中设置meta增加title

const routes = [  {  path: '/',  component: Home,  meta: { title: '首页' }  },  {  path: '/about',  component: About,  meta: { title: '关于我们' }  }  
]

在路由守卫中设置标题

import Vue from 'vue';  
import Router from 'vue-router';  Vue.use(Router);  const router = new Router({  routes,  // 在这里添加路由守卫来设置标题  beforeEach(to, from, next) {  document.title = to.meta.title; // 设置页面标题为当前路由的 meta.title  next(); // 一定要调用 next() 方法，否则路由不会继续导航  }  
});

Vue Router中meta属性如下：

属性名	作用
`title`	设置页面的标题，用于显示在浏览器标签页上
`description`	为路由提供一个简短的描述，可用于SEO优化和搜索引擎结果描述
`params`	定义路由参数，用于在路由组件中获取和使用这些参数
`redirect`	重定向到另一个路由，当用户访问当前路由时，直接跳转到指定的路由
`props`	控制路由组件的props是否可以被子路由继承
`alias`	设置当前路由的别名，方便进行路由导航和URL管理
`children`	定义当前路由的子路由，用于组织嵌套路由
`index`	定义路由的初始组件，当访问该路由时，首先显示该组件
`controller`	自定义路由的控制器，用于处理路由导航和渲染组件的逻辑
`meta`	自定义元信息，可以在路由守卫、导航钩子等地方获取并使用这些信息