如何在Quasar v2 + Vue 3项目中通过i18n实现多语言差异化日期格式配置

1. 补全vue-i18n的datetimeFormats配置 #

你当前仅配置了US地区的日期规则，需要在datetimeFormats字段下追加所有目标地区的格式配置，vue-i18n会自动根据当前激活的locale匹配对应规则：

// i18n.ts
const i18n = createI18n({
  locale: 'US',
  messages,
  datetimeFormats: {
    'US': {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      }
    },
    // 新增DE地区配置
    'DE': {
      short: {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      }
    }
    // 可继续追加其他需要适配的地区配置
  }
})

以上配置基于浏览器内置Intl.DateTimeFormat规范实现，会自动适配地区默认分隔符：US地区自动用/分隔生成MM/DD/YYYY格式，DE地区自动用.分隔生成DD.MM.YYYY格式。

2. 同步配置Quasar多语言（可选，使用Quasar日期相关组件时需要） #

如果你项目中用到了Quasar自带的QDate等日期组件、或者Quasar内置的日期工具方法，需要同步配置Quasar的语言包，和vue-i18n的locale联动：

// main.ts 或Quasar入口配置文件
import { Quasar } from 'quasar'
import langUS from 'quasar/lang/en-US'
import langDE from 'quasar/lang/de'

// 初始化Quasar时设置默认语言
app.use(Quasar, {
  lang: langUS
})

3. 语言切换逻辑（动态切换语言时需要） #

如果需要动态切换语言，只要同时修改vue-i18n的locale和Quasar的语言配置即可，日期会自动更新为对应地区的格式：

// 切换到德语示例
import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'
import langDE from 'quasar/lang/de'

const { locale } = useI18n()
const $q = useQuasar()

function switchToGerman() {
  locale.value = 'DE'
  $q.lang.set(langDE)
}

4. 代码验证 #

你现有模板中的{{ $d(date, 'long') }}不需要修改，切换locale后会自动输出对应格式的日期：

• locale为US时输出格式：06/10/2021, 18:00:00
• locale为DE时输出格式：10.06.2021, 18:00:00

如果在setup组合式API中需要格式化日期，可以通过useI18n获取格式化方法：

const { d } = useI18n()
const formattedDate = d(new Date(), 'long')

内容的提问来源于stack exchange，提问作者Little Monkey