vite .env.test环境使用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>

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

解决办法

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