關(guān)于vue使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題
前端開發(fā)后臺(tái)管理系統(tǒng)，常用的UI庫(kù)當(dāng)屬Element UI和 Ant Design Vue，但是前段時(shí)間遇到一個(gè)奇葩問(wèn)題，在這里記錄一下，防止小伙伴們踩坑。
后臺(tái)系統(tǒng)，大家肯定都用過(guò)時(shí)間控件，本期我們使用的是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>
上邊的寫法并沒有錯(cuò)，開發(fā)環(huán)境也可以正常使用，但是打包后發(fā)現(xiàn)就不好使了
解決辦法
后來(lái)通過(guò)多方實(shí)驗(yàn)，發(fā)現(xiàn)我們?cè)趨^(qū)分項(xiàng)目環(huán)境時(shí)，喜歡在項(xiàng)目根目錄創(chuàng)建.env.xx，通過(guò)多個(gè)**.env文件**實(shí)現(xiàn)。
例如 開發(fā)環(huán)境.env.dev，測(cè)試環(huán)境.env.test，生產(chǎn)環(huán)境.env.prod等等。
本來(lái)這沒啥問(wèn)題，但是在**.env.test環(huán)境時(shí)**，我們發(fā)現(xiàn)打包后a-date-picker控件無(wú)法選中，因此嘗試把.env.test 改為.env.sandbox
// package.json
{
....
'scripts':{
"dev": "vite --mode dev --open",
"build": "vite build --mode sandbox"
}
....
}
這時(shí)候再次打包，發(fā)現(xiàn)問(wèn)題解決了。至于其中原理不太清楚，希望知道的小伙伴評(píng)論區(qū)留言~
到此這篇關(guān)于關(guān)于vue使用ant design vue,打包后a-date-picker控件無(wú)法選擇日期的問(wèn)題的文章就介紹到這了,更多相關(guān)a-date-picker控件無(wú)法選擇日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實(shí)現(xiàn)
本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue中transition單個(gè)節(jié)點(diǎn)過(guò)渡與transition-group列表過(guò)渡全過(guò)程
這篇文章主要介紹了Vue中transition單個(gè)節(jié)點(diǎn)過(guò)渡與transition-group列表過(guò)渡全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList 前期準(zhǔn)備（一）
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList的前期準(zhǔn)備,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了關(guān)于vue中媒體查詢不起效的原因總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI)
本文主要介紹了Vue項(xiàng)目Nginx子目錄部署(Vite和Vue-CLI),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
Vue項(xiàng)目如何實(shí)現(xiàn)rsa加密
這篇文章主要介紹了Vue項(xiàng)目如何實(shí)現(xiàn)rsa加密，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識(shí),我們先來(lái)從Vue提供的Vue.set()和this.$set()這兩個(gè)api看看它內(nèi)部是怎么實(shí)現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
這篇文章介紹了Vue中的生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01