关于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+Antv F2实现混合图表

    Vue+Antv F2实现混合图表

    这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 如何利用 vue实现鼠标悬停时显示元素或文本

    如何利用 vue实现鼠标悬停时显示元素或文本

    Vue.js 是一种流行的 JavaScript 框架,可以使 Web 应用程序的开发变得更加轻松和高效,这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下
    2023-05-05
  • vue-cli-service build 自定义参数方式

    vue-cli-service build 自定义参数方式

    这篇文章主要介绍了vue-cli-service build 自定义参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    本篇文章主要介绍了利用 Vue.js 实现前后端分离的RBAC角色权限管理,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • vue中watch和computed的区别详解

    vue中watch和computed的区别详解

    这篇文章主要给大家介绍了关于vue中watch和computed区别的相关资料,computed和watch都是vue框架中的用于监听数据变化的属性,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue项目打包压缩的实现(让页面更快响应)

    Vue项目打包压缩的实现(让页面更快响应)

    这篇文章主要介绍了Vue项目打包压缩的实现(让页面更快响应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue的代理配置pathRewrite重写不生效问题及解决

    vue的代理配置pathRewrite重写不生效问题及解决

    这篇文章主要介绍了vue的代理配置pathRewrite重写不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现从外部修改组件内部的变量的值

    vue实现从外部修改组件内部的变量的值

    这篇文章主要介绍了vue实现从外部修改组件内部的变量的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 浅谈vue-router2路由参数注意的问题

    浅谈vue-router2路由参数注意的问题

    下面小编就为大家带来一篇浅谈vue-router2路由参数注意的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    在网站中普遍会遇到这样的需求,路由跳转前做一些验证,比如登录验证(未登录去登录页)。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能,感兴趣的朋友一起看看吧
    2018-03-03

最新评论