前端开发后台管理系统，常用的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"
	}
....
}

这时候再次打包，发现问题解决了。至于其中原理不太清楚，希望知道的小伙伴评论区留言~