脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → a-date-picker控件无法选择日期

关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题

 更新时间：2023年04月19日 11:33:08   作者：拿回忆下酒  
这篇文章主要介绍了关于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>

在这里插入图片描述

上边的写法并没有错，开发环境也可以正常使用，但是打包后发现就不好使了

解决办法

后来通过多方实验，发现我们在区分项目环境时，喜欢在项目根目录创建.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结合Openlayers使用Overlay添加Popup弹窗实现

    Vue结合Openlayers使用Overlay添加Popup弹窗实现

    本文主要介绍了Vue结合Openlayers使用Overlay添加Popup弹窗实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue中transition单个节点过渡与transition-group列表过渡全过程

    Vue中transition单个节点过渡与transition-group列表过渡全过程

    这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue Router动态路由使用方法总结

    Vue Router动态路由使用方法总结

    这篇文章主要介绍了Vue Router动态路由使用方法总结,需要的朋友可以参考下
    2023-10-10
  • Vue.js实现简单ToDoList 前期准备（一）

    Vue.js实现简单ToDoList 前期准备（一）

    这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 关于vue中媒体查询不起效的原因总结

    关于vue中媒体查询不起效的原因总结

    这篇文章主要介绍了关于vue中媒体查询不起效的原因总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue项目Nginx子目录部署(Vite和Vue-CLI)

    Vue项目Nginx子目录部署(Vite和Vue-CLI)

    本文主要介绍了Vue项目Nginx子目录部署(Vite和Vue-CLI),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • Vue项目如何实现rsa加密

    Vue项目如何实现rsa加密

    这篇文章主要介绍了Vue项目如何实现rsa加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • 从vue源码解析Vue.set()和this.$set()

    从vue源码解析Vue.set()和this.$set()

    这篇文章主要介绍了从vue源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧
    2018-08-08
  • Vue中的生命周期介绍

    Vue中的生命周期介绍

    这篇文章介绍了Vue中的生命周期，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • 浅谈将three项目迁移至vue项目遇到的问题

    浅谈将three项目迁移至vue项目遇到的问题

    本文主要介绍了将three项目迁移至vue项目遇到的问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论