Vuetify 3.4中如何切换v-date-picker组件的区域设置？

问题详情 #

我正在使用Vuetify 3.4，想要根据变量切换日期选择器的区域设置（比如切换到德语），但尝试了多种方法都没成功：

尝试1：仅使用<v-locale-provider> #

我先直接用区域提供者包裹日期选择器：

<v-locale-provider locale="de">
  <v-date-picker></v-date-picker>
</v-locale-provider>

但这并没有让日期选择器切换到德语。

尝试2：配置Vuetify区域与日期适配器 #

为了添加德语区域支持，我修改了Vuetify的初始化配置：

import { createVuetify } from 'vuetify'
import { sv, de } from 'vuetify/locale'
import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import svSE from 'date-fns/locale/sv'
import deGer from 'date-fns/locale/de'

export const vuetify = createVuetify({
  locale: {
    messages: { sv, de },
  },
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      sv: svSE,
      de: deGer,
    },
  },
})

结果触发了模块解析错误：

Uncaught TypeError: Failed to resolve module specifier "date-fns/locale/de". Relative references must start with either "/", "./", or "../".

尝试3：不配置直接初始化Vuetify #

因为我不需要自定义日期适配器，只希望通过v-locale-provider传递区域设置，所以尝试了最简初始化：

export const vuetify = createVuetify()

但依然无效，当传入fr或de时，控制台会弹出警告：

Vuetify: Translation key "$vuetify.datePicker.title" not found in "de", trying fallback locale

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