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

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

简介

一、 jquery-i18n-properties

1. 依赖

jQuery ：/jquery/3.3.1/jquery.min.jsjquery-i18n-properties： /jquery-i18n-properties/jquery-i18n-properties

2. 语言文件

Language.properties=> Base propertiesLanguage_zh.propertiesLanguage_en.properties

3. 集成 jQuery-i18n-properties

引入jQuery-i18n-properties

<script src="/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 resourceslet insertEle = $(".i18n");insertEle.each(function () {$(this).html($.i18n.prop($(this).attr('name')));});// Accessing a simple value through a JS letiablealert(msg_hello + ' ' + msg_world);// Accessing a value with placeholders through a JS functionalert(msg_complex('John', 'Monday'));}});}$(function () {execI18n();});

4. 在html中使用相关的properties

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

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

5. 相关API

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

二、 vue-i18n

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

1. 引入vue-i18n

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

<script src="/vue/dist/vue.js"></script><script src="/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注入方法

参考示例代码：

/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版本

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 languageconst browserLang = translate.getBrowserLang();translate.setDefaultLang(browserLang);// the lang to use, if the lang isn't available, it will use the current loader to get themtranslate.use('en');}}

参考教程

/ngx-translate/core

参考示例

/cassilup/angular-i18n-ngx-translate