摘要：

　　国际化是指将页面显示的信息翻译成不同语言，可以根据不同语言开发多个版本，然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本，而且维护起来也很麻烦，一个地方有问题就要修改所有版本。本文主要是分享一种前端国际化解决方法，并且已经应用到自己的项目中。

前端国际化需要将页面HTML、javascript的提示信息、后端返回的信息翻译成对应的语言。如果我们能够将这几个地方的内容提取出来，然后用一个翻译函数，根据不同的参数将内容翻译成不同的语言，这样就达到我们的目的了。

页面国际化：

　　对于标签里的内容国际化，需要我们在页面显示出来之前就做好翻译。使用i18n插件来完成，先到官网下载插件，然后引到自己的项目中。

 1 function localize(lng){
 2     var deferred = $.i18n.init({
 3         lng         : lng || 'zh-CN',      //翻译成的语言
 4         load        : 'current',           //加载当前设置的语言包
 5         getAsync    : false,               //是否异步调用语言包
 6         cookieName  : 'i18n',              //cookie的名称
 7         preload     : ['zh-CN', 'en-US'],  //预加载语言包
 8         fallbackLng : ['zh-CN', 'en-US'],  //如果没有设置，则默认为“开发”。如果打开，所有丢失的键/值将被翻译成该语言。
 9         resGetPath  : '/locale/__lng__/__ns__.json',                          // 加载资源的路径
10         ns: { namespaces: ['test'], defaultNs: 'test'},                       //加载的语言包
11         useLocalStorage : false,                                              //是否将语言包存储在localstorage
12         localStorageExpirationTime: 86400000                                  // 有效周期，单位ms。默认1周
13     });
14     return deferred;
15 }

对应页面内容加上data-i18n属性，如下：

1 <div class="content">
2     <h2 data-i18n="test.title">测试</h2>
3     <span data-i18n="test.content">这是一个测试</span>
4 </div>

en-US/test.json

1 {
2     "test": {
3         "title": "test",
4         "content": "this is a test"
5     }
6 }

zh-CN/test.json

1 {
2     "test": {
3         "title": "测试",
4         "content": "这是一个测试"
5     }
6 }

对应js

1 localize().done(function(){ $('div.content').i18n();});

javascript文件和后台返回信息的国际化：

　　我们只需要将内容信息提取到一个JSON或者js文件，然后将其转换成英文，如下：

i18n.message = {

"success" : "成功",

"fail" : "失败"

};

然后在js文件中，直接替换"成功"-->i18n.message.success，也可以定义一个通用函数来做翻译

1 locale.curryGetMsg = function(ns, cl){
2     return (cl = chopper.locale)[ns] ?
3     function(msg){
4         return cl[ns][msg] || cl.action[msg] || cl.common[msg] || cl.message[msg] || msg;
5     } :
6     function(msg){
7         return cl.action[msg] || cl.common[msg] || cl.message[msg] || msg;
8     };
9 };

在项目中只需要调用这个函数，如下：

1 var test = locale.curryGetMsg("module");// module为对应的模块
2 
3 test.("success");

下面是一个i18n例子：

文件结构为

i18n-->

        index.html

        i18next-latest.js

        locale-->

                en-US-->

                        test.json

                zh-CN-->

                        test.json

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 6         <script src="./i18next-latest.js"></script>
 7     </head>
 8     <body>
 9         <div class="content">
10             <h2 data-i18n="test.title">测试</h2>
11             <span data-i18n="test.content">这是一个测试</span>
12         </div>
13         <script>
14         function localize(lng){
15             var deferred = $.i18n.init({
16                 lng         : lng || 'zh-CN',      //翻译成的语言
17                 load        : 'current',           //加载当前设置的语言包
18                 getAsync    : false,               //是否异步调用语言包
19                 cookieName  : 'i18n',      //cookie的名称
20                 preload     : ['zh-CN', 'en-US'],  //预加载语言包
21                 fallbackLng : ['zh-CN', 'en-US'],  //如果没有设置，则默认为“开发”。如果打开，所有丢失的键/值将被翻译成该语言。
22                 resGetPath  : './locale/__lng__/__ns__.json', // 加载资源的路径
23                 ns: { namespaces: ['test'], defaultNs: 'test'},             //加载的语言包
24                 useLocalStorage : false,                                              //是否将语言包存储在localstorage
25                 localStorageExpirationTime: 86400000                                  // 有效周期，单位ms。默认1周
26             });
27             return deferred;
28         }
29         localize('en-US').done(function(){ $('div.content').i18n();});
30         </script>
31     </body>
32 </html>

转自https://www.cnblogs.com/xiyangbaixue/p/4069681.html

该文章在 2025/9/8 10:38:55 编辑过

关键字查询

国际

语言

前端

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。