Skip to content

国际化

fast-crud的国际化使用vue-i18n-next
配置非常简单,只需use时传入i18n对象即可

app.use(FastCrud, { i18n } )

WARNING

1.13以上版本已经无需引入fs的国际化配置文件

过时内容,已折叠

步骤

1. createI18n

引入fast-crud的国际化文件,实例化i18n对象

js
import enFsLocale from "@fast-crud/fast-crud/dist/locale/lang/en";
import zhFsLocale from "@fast-crud/fast-crud/dist/locale/lang/zh-cn";
import { createI18n } from "vue-i18n";
const messages = {
  [enLocale.name]: {
    label: "English",
    // fs 这个属性很关键,一定要保证有这个属性,
    // 你也可以覆盖fs里面的值自定义相关文本
    fs: enFsLocale.fs,
    // 定义您自己的字典,但是请不要和 `fs` 重复,这样会导致内部组件的翻译失效.
    m: en
  },
  [zhLocale.name]: {
    label: "简体中文",
    // 你也可以覆盖fs里面的值自定义相关文本
    fs: zhFsLocale.fs,
    // 定义您自己的字典,但是请不要和 `fs`重复,这样会导致内部组件的翻译失效.
    m: zh
  }
};

export default createI18n({
  legacy: false,
  locale: zhLocale.name,
  fallbackLocale: enLocale.name,
  messages
});

2. use时传入i18n对象

js
app.use(FastCrud, { i18n } )

覆盖默认i18n文本

有时候官方翻译的文本不符合你的需求,你可以通过覆盖默认文本来实现自定义文本

js
const messages = {
    en: {
        label: "English",
        fs:{
            //你要覆盖的配置
            //配置结构请参考,https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/locale/lang/en.ts
        }
    },
    "zh-cn": {
        label: "简体中文",
        fs:{
            //你要覆盖的配置
            //配置结构请参考,https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/locale/lang/zh-cn.ts
        }
    }
};

export default createI18n({
    legacy: false,
    locale: "zh-cn",
    fallbackLocale: "zh-cn",
    messages
});