您的位置: 首页  >  文章  >  原生js/Angular/Vue等不同框架下的中英文切换———多语言支持

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

分类: 文章 • 2023-01-22 23:49:36

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

简介

框架 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. 依赖
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
    原生js/Angular/Vue等不同框架下的中英文切换———多语言支持
  • 配置 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的国际化插件。它简单、强大且面向组件。
原生js/Angular/Vue等不同框架下的中英文切换———多语言支持

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. 准备翻译文件

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

3. 创建VueI18n 实例

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

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

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

参考示例代码：
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

相关推荐