关于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控件无法选择日期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！