记录一下个人开发过程中遇到的各种问题和解决方式,持续更新
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