国际化支持

项目需要支持多语言，我们需要提取出项目中使用的静态文本，使用语言包进行管理，当切换语言设置的时候，可以自动切换整个项目的文字显示。

安装依赖包

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

目录结构

以 tcc-mes-web 为例子：

语言包路径：/tcc-mes-web/src/locales
目录结构：

├── locales               # 国际化语言包
│   ├── lang              # 语言包内容
│   │   ├── zh-CN         # 中文(简体)字典
│   │   ├── zh-CN.js      # 中文(简体)字典入口 
│   │   ├── zh-HK         # 中文(繁体)字典
│   │   ├── zh-HK.js      # 中文(繁体)字典入口
│   │   ├── en-US         # 英文字典
│   │   └── en-US.js      # 英文字典入口
│   └── index.js          # 语言包入口
└── ...

如需增加支持其它语言，在 lang 下分别新建 xx 语言目录及 xx.js 语言入口；

使用示例

1、准备语言包文本

中文(简体):

// src/locales/lang/zh-CN.js
import antd from 'ant-design-vue/es/locale-provider/zh_CN'
import momentCN from 'moment/locale/zh-cn'
import global from './zh-CN/global'
import frame from './zh-CN/frame'

import user from './zh-CN/user'

const components = {
  antLocale: antd,
  momentName: 'zh-cn',
  momentLocale: momentCN
}

export default {
  ...components,
  ...global,
  ...frame,
  ...user
}

// src/locales/lang/zh-CN/user.js
export default {
  'user.login.login': '登录',
  'user.login.tab.title.one': '中台帐号登录',
  'user.login.tab.login.two': '原帐号登录',
  'user.login.tab.login.three': '验证码登录',
  'user.login.remember-password': '记住密码',
  'user.login.forgot-password': '忘记密码',
  'user.login.account.placeholder': '请输入管理员帐号或手机号',
  'user.login.old-account.placeholder': '请输入原始帐号',
  'user.login.password.placeholder': '请输入密码'
}

中文(繁体):

// src/locales/lang/zh-HK.js
import antd from 'ant-design-vue/es/locale-provider/zh_TW'
import momentHK from 'moment/locale/zh-hk'
import global from './zh-HK/global'
import frame from './zh-HK/frame'

import user from './zh-HK/user'

const components = {
  antLocale: antd,
  momentName: 'zh-hk',
  momentLocale: momentHK
}

export default {
  ...components,
  ...global,
  ...frame,
  ...user
}

// src/locales/lang/zh-HK/user.js
export default {
  'user.login.login': '登入',
  'user.login.tab.title.one': '中台帳號登入',
  'user.login.tab.login.two': '原帳號登入',
  'user.login.tab.login.three': '驗證碼登入',
  'user.login.remember-password': '記住密碼',
  'user.login.forgot-password': '忘記密碼',
  'user.login.account.placeholder': '請輸入管理員帳號或手機號',
  'user.login.old-account.placeholder': '請輸入原始帳號',
  'user.login.password.placeholder': '請輸入密碼'
}

英文:

// src/locales/lang/en-US.js
import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
import momentEU from 'moment/locale/eu'
import global from './en-US/global'
import frame from './en-US/frame'

import user from './en-US/user'

const components = {
  antLocale: antdEnUS,
  momentName: 'eu',
  momentLocale: momentEU
}

export default {
  ...components,
  ...global,
  ...frame,
  ...user
}

// src/locales/lang/en-US/user.js
export default {
  'user.login.login': 'Login',
  'user.login.tab.title.one': 'TCC account',
  'user.login.tab.login.two': 'Original account',
  'user.login.tab.login.three': 'Verification Code',
  'user.login.remember-password': 'Remember password',
  'user.login.forgot-password': 'Forgot password',
  'user.login.account.placeholder': 'Please enter your account or mobile',
  'user.login.old-account.placeholder': 'Please enter your original account number',
  'user.login.password.placeholder': 'Please enter your password'
}

2、页面中使用

// html 需要使用 {{}} 将 name包装起来
<template>
  {{ $t(user.login.login) }}
</template>

// js
$t('name')

3、请求头传参数

前端可通过携带请求头 Accept-Language:zh-CN 来指定后端需要返回的语言。

// src/utils/http/axios.js

// 添加请求拦截器
……
instance.interceptors.request.use(
  config => {
    const lang = Vue.ls.get(APP_LANGUAGE)
    lang && (config.headers["Accept-Language"] = lang);
    return config
  },
……

其它事项

1、基于 vue-i18n 依赖包实现国际化，更多使用细节查看官网；
2、综合管理平台需要给对应租户开通后才能使用多语言功能；