Fantastic-admin 文档 (v1)

Appearance

国际化 ​

框架使用 vue-i18n 实现国际化支持。

专业版默认提供了简体中文、繁体中文和英语三种语言包，在配置里设置 enableI18n: true 可开启语言切换按钮。

提示

如果你用不到国际化，无需删除任何文件，按照常规开发进行即可，框架已经做好兼容支持。

语言包 ​

语言包存放在 /src/lang/packages/ 目录下，因为 Element 本身也有自己的语言包，所以在做国际化支持的时候，框架的语言包文件命名需要和 Element 保持一致，可点击这里查看 Element 的语言包文件。

新增语言包后需要到 /src/lang/index.js 文件里引用并按照原有配置进行修改，以新增一个日文语言包为例：

js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import elementLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import elementLocaleEn from 'element-ui/lib/locale/lang/en'
import elementLocaleJa from 'element-ui/lib/locale/lang/ja'

import localeZhCN from './packages/zh-CN'
import localeZhTW from './packages/zh-TW'
import localeEn from './packages/en'
import localeJa from './packages/ja'

import store from '@/store'

Vue.use(VueI18n)

const messages = {
    'zh-CN': {
        ...elementLocaleZhCN,
        ...localeZhCN
    },
    'zh-TW': {
        ...elementLocaleZhTW,
        ...localeZhTW
    },
    'en': {
        ...elementLocaleEn,
        ...localeEn
    },
    'ja': {
        ...elementLocaleJa,
        ...localeJa
    }
}

...
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import elementLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import elementLocaleEn from 'element-ui/lib/locale/lang/en'
import elementLocaleJa from 'element-ui/lib/locale/lang/ja'

import localeZhCN from './packages/zh-CN'
import localeZhTW from './packages/zh-TW'
import localeEn from './packages/en'
import localeJa from './packages/ja'

import store from '@/store'

Vue.use(VueI18n)

const messages = {
    'zh-CN': {
        ...elementLocaleZhCN,
        ...localeZhCN
    },
    'zh-TW': {
        ...elementLocaleZhTW,
        ...localeZhTW
    },
    'en': {
        ...elementLocaleEn,
        ...localeEn
    },
    'ja': {
        ...elementLocaleJa,
        ...localeJa
    }
}

...

默认语言 ​

在配置里 defaultLang 可设置默认语言，留空则跟随系统语言。如果设置的默认语言或者系统语言缺少对应的语言包，则以简体中文显示。

路由部分 ​

以简体中文为例，打开 /src/lang/packages/zh-CN.js 文件可以看到路由相关的配置，在 route 对象里可以扩展需要开启国际化支持的路由。

js
export default {
    ...
    route: {
        login: '登录',
        dashboard: '控制台',
        personal: {
            setting: '个人设置',
            editpassword: '修改密码'
        },
        i18n: '国际化'
	}
}
export default {
    ...
    route: {
        login: '登录',
        dashboard: '控制台',
        personal: {
            setting: '个人设置',
            editpassword: '修改密码'
        },
        i18n: '国际化'
	}
}

光配置好简体中文的还不行，其它语言包文件里也要同步添加。

当都配置好后，可在路由配置的 meta 对象里设置 i18n 参数，例如：

js
meta: {
    title: '国际化',
    i18n: 'route.i18n',
    icon: 'ri-earth-line',
    badge: 'NEW'
}
meta: {
    title: '国际化',
    i18n: 'route.i18n',
    icon: 'ri-earth-line',
    badge: 'NEW'
}

强烈建议开启国际化的时候，title 也还是设置，框架的处理逻辑是：

先调用当前设置的语言，如果没有再调用默认简体中文的语言，如果还没有，则以显示 title 设置的内容，所以 title 算是个缺省项。

单页组件部分 ​

如果每个路由对应的页面组件都要做国际化支持，那语言包文件就会变得无比庞大且难以维护，推荐在每个页面组件里使用 <i18n> 自定义块进行语言维护，可打开 /src/views/i18n_example/index.vue 查看示例。

框架部分 ​

框架自带的部分功能已经支持国际化，以简体中文为例，打开 /src/lang/packages/zh-CN.js 文件可看到 app 对象里的就是框架部分的语言信息，如果需要对框架进行二次开发，请在这里扩展。

js
export default {
    app: {
        profile: '个人设置',
        login: '登录',
        logout: '退出登录',
        account: '用户名',
        password: '密码'
    },
    ...
}
export default {
    app: {
        profile: '个人设置',
        login: '登录',
        logout: '退出登录',
        account: '用户名',
        password: '密码'
    },
    ...
}

框架二次开发请详细阅读 vue-i18n 文档。

Copyright © 2020-present Fantastic-admin