> 文章列表 > vite .env.test环境使用ant design vue ,打包后a-date-picker控件无法选择日期

vite .env.test环境使用ant design vue ,打包后a-date-picker控件无法选择日期

vite .env.test环境使用ant design vue ,打包后a-date-picker控件无法选择日期

前端开发后台管理系统,常用的UI库当属Element UI和 Ant Design Vue,但是前段时间遇到一个奇葩问题,在这里记录一下,防止小伙伴们踩坑。

后台系统,大家肯定都用过时间控件,本期我们使用的是ant design vue,所以控件也使用的是a-date-picker

举例

<template>
<a-range-pickerv-model:value="value"format="YYYY-MM-DD"valueFormat="YYYY-MM-DD"allowClear/>
</template><script setup>import {  ref } from 'vue';let value = ref()
</script>

vite .env.test环境使用ant design vue ,打包后a-date-picker控件无法选择日期
上边的写法并没有错,开发环境也可以正常使用,但是打包后发现就不好使了

解决办法

后来通过多方实验,发现我们在区分项目环境时,喜欢在项目根目录创建.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"}
....
}

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