前端i18n翻译-多语言实现方案

依赖库：vue-i18n

需求场景：

(目前只准备中文和英文两套,默认中文,后续需要其他语言加个翻译的json文件即可)
web端：登录、首页给按钮让用户实现多语言切换
pda端：登录页面、个人中心提供多语言切换

需要协调人员：

后端人员:

a.枚举接口和接口返回提示需要后端翻译，建议是在请求header上加一个标识，后端根据标识返回对应的语言
b.枚举接口只需要把name的值替换，其他不用替换
c.菜单接口目前也是根据后端接口返回，建议由后端翻译，因为系统中可更改菜单名称和code功能，可商量，前端翻译缺陷就是改变一次菜单名称，前端就需要发布一次
d.时间格式目前来看后端都是统一的返回，前端这边都进行了转换，建议前端都转换成：yy-MM-DD hh:mm:ss 格式，目前前端转成 yy年MM月DD日 居多，后续建议修改

英语翻译人员:

项目快结束时，前端人员会出一个 zh-CN.json 文件，需要英语翻译人员按照 zh-CN.json 文件出一版 en.json 文件，设计到多个专业名词，怕开发人员翻译不准确，或者利用vscode插件i18n ally 先翻译一版英文，再根据这版进行调整

前端需要做的准备工作

1.配置 i18n
2.通过storage和vuex 实现改变语言标识
3.提取每个文件中文，通过i18n ally插件提取
4.测试
5.修改因英文带来的样式影响
a.表单改成上下展示形式
b.按钮固定宽度改成最小宽度，自适应文字
c.列表操作列自动换行

vue2(web)实现步骤

参考 https://blog.youkuaiyun.com/qq_18932003/article/details/136793091

值得注意的是：
vue-i18n需要安装8版本的，9版本的是vue3，如果版本低会造成页面不流畅问题，最新版可以保证页面不卡顿

1.安装vue-i18n

npm install vue-i18n@8 -save

2.建立文件夹，lang文件里面是各种语言对应的json文件
src/i18n/lang/en.json
src/i18n/lang/zh-CN.json
src/i18n/index.js
两个文件中的key一定要是对应的，例如：

en.json
{
   "hello":"hello"
}

zn-CN.json
{
   "hello":"你好"
}

3.index.js文件

import VueI18n from 'vue-i18n'
import Vue from 'vue'
import Cookies from 'js-cookie'

// 引入element的语言包
import elementEnLocale from 'element-ui/lib/locale/lang/en' // 英文
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // 中文

// 引入需要语言包也可是js文件，export default抛出语言包的对象
import enLocale from './lang/en.json'
import zhLocale from './lang/zh-CN.json'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}

const i18n = new VueI18n({
  locale: getLanguage(),
  messages
})

export default i18n

4.main.js文件引入

import i18n from './i18n/index'
...
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

5.页面中使用，通过 $t(key)

$t("hello")
中文模式下展示 你好
英文模式下展示 hello

函数中使用
this.$t("hello")

props中使用

import i18n from '@/i18n/index'

i18n.t('hello')

vue3+uniapp实现步骤

1.src 建locale目录，目录下需要各种语言包配置文件 en.json 和 zh-Hans.json 等，目录名称和文件一定要按照这个来，否则pages.json国际化语言不生效，json文件格式如下：

{
  "home":"首页",
  "page1":{
    "test":"测试页"
  }
}

如果是要在pages.json中配置的，必须写在最顶层，而且字段不能带- 如果是在页面其他地方引入的，则按照正常json来就好

2.在 index.ts 配置

import { createI18n } from 'vue-i18n'

// 引入各个语言配置文件
import zhLocale from '@/locale/zh-Hans.json'
import enLocale from '@/locale/en.json'

const messages = {
  en: enLocale,
  'zh-Hans': zhLocale
}

const storageLang = uni.getStorageSync('i18n')

const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 全局注册 $t方法
  locale: storageLang.locale || 'zh-Hans', //默认显示的语言
  messages
})
export default i18n

3.mian.ts中引入

import i18n from '@/i18n/index'
...
app.use(i18n)
app.config.globalProperties.$t = i18n.global.t

4.使用方式
template引入

{{ $t('home') }}
$t('page1.test')

setup引入

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

t('home')

ts文件中引入

import i18n from '@/i18n/index'

i18n.global.t('home')

pages.json中使用

使用%%来辨别，切换语言的时候别忘了设置一下uniapp内部的国际化语言
uni.setLocale('en')
自己引入了 i18n的，也要设置
i18n.global.locale.value = 'en'

{
      "path": "pages/.../.../index",
      "name": "...",
      "style": {
				 "navigationBarTitleText": "%zhong-wen-ming-ci%",
        },
  },

在zh-CN.json中：
"zhong-wen-ming-ci": "中文名词"
在en.json中：
"zhong-wen-ming-ci": "Chinese word"
引用的时候使用%...%

页面提取中文翻译

利用 vscode 中 i18n ally插件
1.在扩展应用安装 i18n ally
2.项目 .vs 加 settings.json,如果未生效，需要重新安装并应用扩展

{
    //设置i18n-ally配置
    "i18n-ally.localesPaths": ["src/i18n/lang"], // 翻译文件路径
    "i18n-ally.keystyle": "nested", // 翻译路径格式,
    "i18n-ally.sourceLanguage": "en", // 翻译源语言
    "i18n-ally.displayLanguage": "zh-CN", //显示语言， 这里也可以设置显示英文为en
    "i18n-ally.enabledParsers": [ "json"], 
    "i18n-ally.enabledFrameworks": ["vue"],
    "i18n-ally.extract.autoDetect": true
}

3.打开页面中一个文件，vscode左侧会出现 i18n ally的图标
当前文件将中文都提取出来了，点击翻译文案即可翻译

根据当前语言版本动态添加类名的方法，然后在样式表中为这些类名定义不同的样式。

    <div :class="$i18n.locale">
      <p class="greeting">{{ $t('greeting') }}</p>
    </div>

  .en .greeting {
    color: blue;
  }
  .zh .greeting {
    color: red;
  }