关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题
前端开发后台管理系统,常用的UI库当属Element UI和 Ant Design Vue,但是前段时间遇到一个奇葩问题,在这里记录一下,防止小伙伴们踩坑。
后台系统,大家肯定都用过时间控件,本期我们使用的是ant design vue,所以控件也使用的是a-date-picker
举例
<template> <a-range-picker v-model:value="value" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" allowClear /> </template> <script setup> import { ref } from 'vue'; let value = ref() </script>
上边的写法并没有错,开发环境也可以正常使用,但是打包后发现就不好使了
解决办法
后来通过多方实验,发现我们在区分项目环境时,喜欢在项目根目录创建.env.xx,通过多个**.env文件**实现。
例如 开发环境.env.dev,测试环境.env.test,生产环境.env.prod等等。
本来这没啥问题,但是在**.env.test环境时**,我们发现打包后a-date-picker控件无法选中,因此尝试把.env.test 改为.env.sandbox
// package.json { .... 'scripts':{ "dev": "vite --mode dev --open", "build": "vite build --mode sandbox" } .... }
这时候再次打包,发现问题解决了。至于其中原理不太清楚,希望知道的小伙伴评论区留言~
到此这篇关于关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题的文章就介绍到这了,更多相关a-date-picker控件无法选择日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue对象添加属性(key:value)、显示和删除属性方式
这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07vscode中vue代码提示与补全没反应解决(vetur问题)
这篇文章主要给大家介绍了关于vscode中vue代码提示与补全没反应解决(vetur问题)的相关资料,文中通过图文将解决的方法介绍的非常详细,需要的朋友可以参考下2023-03-03Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符问题
Vue项目在谷歌浏览器中正常运行,但在IE浏览器中出现问题,如白屏和控制台报错,解决过程包括检查IE设置、调整编辑器配置、引入兼容性插件、使用productionSourceMap定位错误、检查插件依赖和版本,以及重新构建项目2024-09-09
最新评论