原生js/Angular/Vue等不同框架下的中英文切换———多语言支持

近期研究了下不同框架下的中英文切换，本文主要用于总结。希望本文能对你项目多语言支持的技术选型有所帮助。

简介

框架	i18n插件	github地址	描述	证书
Angular	@ngx-translate	* https://github.com/ngx-translate/core * https://github.com/ngx-translate/http-loader * https://github.com/biesbjerg/ngx-translate-extract	Angular 多语言支持插件	MIT Licensed
Vue	vue-i18n	https://github.com/kazupon/vue-i18n	Vue多语言支持插件	MIT Licensed
原生JS	jquery-i18n-properties	https://github.com/jquery-i18n-properties/jquery-i18n-properties	jquery.i18n.properties是一款轻量级的国际化插件，采用.properties文件来对javascript文件进行国际化，即根据用户指定的语言和国家编码来解析对应的以".properties"为后缀的文件。	MIT Licensed
react	react-intl

一、 jquery-i18n-properties

1. 依赖

• jQuery ：https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
• jquery-i18n-properties： https://github.com/jquery-i18n-properties/jquery-i18n-properties

2. 语言文件

• Language.properties => Base properties
• Language_zh.properties
• Language_en.properties

3. 集成 jQuery-i18n-properties

• 引入jQuery-i18n-properties

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="./js/jquery.i18n.properties.js"></script>
    <script src="./js/language.js"></script>

• 准备 Language files
  
• 配置 language.js
  1. getNavLanguage
2. config jQuery.i18n.properties()

let getNavLanguage = function () {
  if (navigator.appName == "Netscape") {
    let navLanguage = navigator.language;
    return navLanguage.substr(0, 2);
  }
  return false;
}


let execI18n = function () {
  let defaultLanguage = "zh";
  let locale = getNavLanguage();

  jQuery.i18n.properties({
    name: 'Messages',
    path: 'properties/',
    mode: 'both',
    language: locale || defaultLanguage,
    callback: function () {
      // init html by translated resources
      let insertEle = $(".i18n");
      insertEle.each(function () {
        $(this).html($.i18n.prop($(this).attr('name')));
      });

      // Accessing a simple value through a JS letiable
      alert(msg_hello + ' ' + msg_world);
      // Accessing a value with placeholders through a JS function
      alert(msg_complex('John', 'Monday'));
    }
  });
}

$(function () {
  execI18n();
});

4. 在html中使用相关的properties

 <div class="i18n" name="在language_files中定义的变量名"></div>

注意：需要使用Server加载语言文件，否则会出现跨域问题

5. 相关API

jQuery.i18n.properties()	加载* .properties 资源文件
jQuery.i18n.prop()	使用是资源文件中的值
jQuery.i18n.browserLang()	获取浏览器语言

6. jQuery.i18n.properties（）相关参数

选项	描述	类型	可选
name	资源文件的名称	string [string]	否
language	指定语言编码： （en： 英文， zh： 中文），或者同时指定语言编码和国家编码(例如： zh_CN, en_US)等	string	是
path	资源文件所在的路径	string	否
mode	加载模式： “vars”表示以javascript变量和函数的形式使用文件中的key，“map”表示以Map的方式使用文件中的key，“both”表示可以同时使用两种方式。如果资源文件中的key包含javascript中的关键字，只能使用map。默认值是vars。	string	是
cache	指定浏览器是否缓存资源文件，默认false	boolean	是
encoding	指定加载资源文件时的编码格式，默认utf-8	string	是
debug	控制台是否记录记录log	boolean	是
async	指定调用callback（回调）函数的方式，false: 所有的资源文件加载请求发送完毕后就调用回调函数， true：所有的资源加载并解析完成后才调用回调函数。默认false	boolean	是
namespace	指定资源文件的keys被存放在namespace下，即$.i18n.properties[namespace][key], 使用namespace可以最大限度的减少冲突和重写的概率; 默认为null不使用namespace	string	是
callback	方法执行完的回调函数	function	是

---

二、 vue-i18n

Vue I18n是Vue.js的国际化插件。它简单、强大且面向组件。

1. 引入vue-i18n

• 对于没有使用@vue/cli的简单项目，可以在index.html中直接引入vue-i18n的CDN资源

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

• 对于使用@vue/cli的项目

npm install vue-i18n

 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)

2. 准备翻译文件

3. 创建VueI18n 实例

4. 在html文件中使用正确的vue-i18n注入方法

参考示例代码：
https://github.com/kazupon/vue-i18n/tree/dev/examples>
vue-i18n 教程:
http://kazupon.github.io/vue-i18n/guide/started.html
vue-i18n api
http://kazupon.github.io/vue-i18n/api/

---

三、 @ngx-translate

1. 安装@ngx-translate/core , @ngx-translate/http-loader

npm install @ngx-translate/core 
npm install @ngx-translate/http-loader

注意：一定要根据当前使用Angular的版本选择正确的@ngx-translate/core版本

Angular	@ngx-translate/core	@ngx-translate/http-loader
2 to 4.2.x	7.x or less	0.x
4.3	7.x or less	1.x to 2.x
5	8.x to 9.x	1.x to 2.x
6	10.x+	3.x+

2. 在app.module.ts 中引入TranslateModule / TranslateLoader / TranslateHttpLoader

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export const TranslateLoaderFactory = (http: HttpClient) => {
	return new TranslateHttpLoader(http, './assets/i18n/','.json')
}
...
    imports: [
...
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: TranslateLoaderFactory,
                deps: [HttpClient]
            }
        }),
...
    ],

3. 定义翻译

en.json

{
    "HELLO": "hello"
}

zh.json

{
    "HELLO": "你好"
}

4. 初始化TranslateService

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate }}</div>
    `
})
export class AppComponent {
    constructor(translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        const browserLang = translate.getBrowserLang();
        translate.setDefaultLang(browserLang);

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }
}

参考教程
https://github.com/ngx-translate/core
参考示例
https://github.com/cassilup/angular-i18n-ngx-translate