记录一下个人开发过程中遇到的各种问题和解决方式，持续更新
1、配置主题颜色报错/失败
- 1、使用babel-plugin-import的解决办法
- 2、如果是使用
unplugin-vue-components的话：
AntDesignVueResolver({
importStyle: 'less' // 默认为css
})
- 3、降级less的版本到3.x
2、And vue message组件没显示（vite + unplugin-vue-components）
unplugin-vue-components 插件无法处理非组件模块，如 message，
需要手动引入样式：import ‘ant-design-vue/es/message/style/css’
3、Type ‘({ key }: { key: string; }) => void’ is not assignable to type ‘MenuClickEventHandler’.
vue和ts的版本兼容问题，升级vue至3.2.x以上或者@types/node降级到18.8.4之前。最简单的方式就是vue升级到最新
4、vue3使用antdv组件v-model不生效
v-model需要改成v-model:value
5、antdv3.x + vite定制主题
- 1、安装less
- 2、vite.config.ts中配置增加下面配置
css: {
preprocessorOptions: {
less: {
modifyVars: {
'primary-color': 'xxx', // 主题色配置
},
javascriptEnabled: true
}
}
}
- 3、全局修改样式的话按照官方示例，但是引入的文件要改为less，因为antdv是使用的less。如果是使用了unplugin-vue-components按需引入，
那么需要在AntDesignVueResolver中配置importStyle: ‘less’
6、解决Antv的input组件自动填充
设置autoComplete属性，如果不生效就填：autoComplete=“new-password”
7、前端下载二进制文件打开失败的问题
Axios的请求中添加responseType为blob
8、字符串显示加密处理（比如139********001）
- (?<=.{n}) 表示保留最开始的n位字符，也是匹配字符的起始位置
- (?=.{n}) 表示保留后的n位字符，也是匹配字符的结束位置
- .{1} 表示匹配除去头尾保留部分的其他字符，只匹配一个
str.replace(/(?<=.{3}).{1}(?=.{3})/g, ‘*’);
9、Vue3 + pinia 使用报错的问题
- 1、注册顺序不对
- 2、如果要在路由中使用，需求在路由守卫中初始化才行
- 3、其他在非setup中使用最好在调用内初始化，例如：
import {
usexxx } from '@/store/xxx'; // pinia store
const store = usexxx(); // 这里初始化失败并报错
router.beforeEach(() => {
const store = usexxx(); // 这里初始化成功
store.xxx;
});
10、Invalid navigation guard
路由守卫中建议最后一行为next()，其他if判断中有使用next()的地方建议改成 return next();
2023-10-09更新：
11、Element控制台提示【Error in beforeDestroy hook: “Error: [ElementForm]unpected width】
form-item设置了label-width为auto同时表单隐藏或销毁时会触发警告，把auto设置为具体值就可以解决
12、chrome浏览器不能录音：【Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined】解决方法
在浏览器的地址栏里输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure，在Insecure origins treated as secure位置处填写报错的url地址
13、ant-design-vue1.7.8表格合并单元格踩坑（直接渲染内容/渲染插槽内容）
ant-design-vue1.7.8中表格合并单元格，但是有自定义插槽的内容，此时应该在column配置中配置customCell，并且return 一个合并配置： attrs: { colSpan: xx, rowSpan: xx }。注意，如果要渲染的内容是插槽内容就配置customeCell，不要使用官方案例中的customeRender