如何在vuejs3-datepicker中添加自定义语言（无需修改node_modules）

你可以通过自定义locale配置对象并直接传递给组件的locale属性来实现，完全不需要改动node_modules内的文件，生产环境也能正常生效，具体操作如下：

• 第一步：定义自定义语言配置
  创建一个包含日期相关文本的对象，示例为自定义越南语配置（可根据需求修改为目标语言）：

const customLocale = {
  days: ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
  daysShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
  daysMin: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
  months: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
  monthsShort: ['Thg1', 'Thg2', 'Thg3', 'Thg4', 'Thg5', 'Thg6', 'Thg7', 'Thg8', 'Thg9', 'Thg10', 'Thg11', 'Thg12'],
  firstDayOfWeek: 1, // 设置一周的起始日，1代表周一
  format: 'DD/MM/YYYY' // 自定义日期显示格式
}

• 第二步：在组件中应用自定义配置
  在使用vuejs3-datepicker的业务组件中，直接将上述配置对象传给组件的locale属性：

<template>
  <datepicker :locale="customLocale" />
</template>

<script setup>
import Datepicker from 'vuejs3-datepicker'
import 'vuejs3-datepicker/dist/main.css'

// 这里可以直接导入外部定义的locale文件，也可以直接写在当前组件内
const customLocale = {
  // 上述的语言配置内容
}
</script>

• 补充说明
  如果需要在多个组件中复用这个自定义locale，可以将其抽成单独的.js或.ts文件，在需要的组件中导入即可。这种方式完全脱离对包内默认locale文件的依赖，打包部署不会有任何问题。

内容的提问来源于stack exchange，提问作者Mộc Uyển Thanh