在用 Vuetify 做项目时发现2个问题。

其一：一些数据表的默认短语是英文，例如“没有数据”显示“No data available”。

其二：新推出的日期选择器 Data-Picker 默认是英文月。

用简单的方法将上述问题解决，让短语显示为中文。下面两图是修改后结果，图后是解决方案。

解决方案

在 Vuetify 配置文件 src\plugins\vuetify.js 中，引入 vuetify/locale 的 i18n 语言文件，并通过 createVuetify 的 locale 进行配置。此时可以解决默认短语本地化问题。

import { zhHans } from 'vuetify/locale'

export default createVuetify({
  locale: {
    locale: 'zhHans',
    messages: { zhHans },
  },
})

为了解决日期选择器本地化问题，还需要一个 date-fns 本地化。通过 npm 安装之：

npm install @date-io/date-fns --save

在 Vuetify 配置文件引入本地化文件，并配置 Adapter：

import DateFnsAdapter from '@date-io/date-fns'
import znCN from 'date-fns/locale/zh-CN'

export default createVuetify({
  date: {
    adapter: DateFnsAdapter,
    locale: {
      zhHans: znCN 
    },
  },
})

重启 Vite 服务器即可看到更改。完整的 vuetify.js 内容示例如下：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'

import { zhHans } from 'vuetify/locale'

import DateFnsAdapter from '@date-io/date-fns'
import znCN from 'date-fns/locale/zh-CN'

export default createVuetify({
  theme: {
    defaultTheme: 'system',
  },
  date: {
    adapter: DateFnsAdapter,
    locale: {
      zhHans: znCN 
    },
  },
  locale: {
    locale: 'zhHans',
    messages: { zhHans },
  },
})