精华内容
下载资源
问答
  • 今天小编会使用boostrap框架搭建一个配有中英文切换功能的网页,还有就是使用nodejs搭建后台服务,从头实现一个完整的前端国际化开发项目,内容不算很复杂,很适合前端已入门的胖友们。01 、前端国际化概述港真,...

    今天小编会使用boostrap框架搭建一个配有中英文切换功能的网页,还有就是使用nodejs搭建后台服务,从头实现一个完整的前端国际化开发项目,内容不算很复杂,很适合前端已入门的胖友们。

    01 、前端国际化概述

    港真,自己刚接到这个需求的时候,也是不知如何下手,毕竟也没经验,后面就找了百度,经过一番探索,最终圆满的完成了任务,下面就把我的经验写下来,有需要的朋友拿去,不谢~~~

    首先我们先来普及一下什么是国际化?国际化这个英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程。在计算机领域这块,大家听起来或许有些懵逼,不过大家可以把它理解为一个页面可以使用不同语言进行切换显示的一个过程。

    经过一番学习之后,得知,目前常用的前端国际化实现方式有:

    1、针对不同的语言,各写一套界面。

    2、使用配置文件的方式,使用的是同一套界面,根据语言的不同加载对应的配置文件。

    刚开始的时候为了尽快完成任务,竟然选择了使用第一种方式,其实第一种方式的实现效率是最高的,因为在你写完一个页面之后,经过复制然后把内容改成对应的语言就好了。殊不知,当你需要修改的页面的某个地方的时候,你要把复制的页面都一并改了,不然出问题了就不好找,还有个问题就是每次切换的时候都需要重新发送请求,每次都要重新加载整个页面,对性能的影响较大,不利于后续的维护。

    出于以上问题的考虑,后面还是使用了第二种方式。最终选择了jQuery的国际化插件jQuery.i18n.properties ,它是一款轻量级的插件,压缩后仅 4kb,api也比较简单,它的国际化资源文件以“.properties”为后缀,包含了各语言相关的键值对。

    下面就开始撸代码:

    02 、前端国际化实现

    1、首先搭建项目结构:

    9fe3bf32305b

    结构说明:

    1.1、component: 用来存放引入的组件,如boostrap

    1.2、i18n:存放jquery-i18n-properties插件和国际化资源配置文件

    1.3、imgs:存放相关图片

    1.4、js:引入的相关脚本

    1.5、server:存放nodeJs实现的后台服务器,因为加载国际化文件需要走服务

    1.6、index.html:国际化测试页面

    index.html的页面结构如下:

    9fe3bf32305b

    2、开发步骤说明

    静态页面开发完成后,首先就要搭建后台的服务,否则在加载国际化文件的时候会报错。

    2.1、搭建nodeJs后台服务器

    9fe3bf32305b

    9fe3bf32305b

    它主要的思路是发送请求的时候能够返回对应的内容。它监听的是localhost的8888端口,

    启动node服务器:

    9fe3bf32305b

    然后浏览器访问:http://localhost:8888/

    9fe3bf32305b

    说明服务已经启动成功,接下来就实现前端国际化。

    2.2、i18n插件的使用

    2.2.1、首先定义不同语言的国际化资源文件:

    9fe3bf32305b

    9fe3bf32305b

    需要注意的是:不同配置文件中的key必须要一样,并且key中不能带空格,不能有重复的key否则会被覆盖。

    2.2.2、在页面定义需要翻译的地方,在切换的时候其实就是替换它的文本内容:

    9fe3bf32305b

    这里需要注意的是,每个需要翻译的地方都需要有一个定义方便后续定位到它,实行内容替换。

    2.2.3、接下来看具体的实现切换的过程:

    9fe3bf32305b

    9fe3bf32305b

    两个地方需要加载国际化资源文件,一是页面加载完毕的时候:

    9fe3bf32305b

    另外就是点击中英文切换按钮的时候需要重新加载:

    9fe3bf32305b

    下面看看切换效果:

    9fe3bf32305b

    9fe3bf32305b

    2.2.4、实现过程中的几个注意点

    (1)、之所以使用cookie缓存,是因为在做语言切换的时候,能记录你切换后的语言,如果你退出之后,再进来显示的还是你上次选择的语言,而不是重新加载默认的语言。

    (2)、如果是初次访问,默认加载的是浏览器的语言。使用浏览器语言的时候需要注意自己的设置,下面用谷歌为例来说说浏览器语言的设置问题。有的或许有疑问就是我浏览器设置了英文,但是页面上显示的仍然是中文。

    这里会有两种情况:

    一种是你之前已经访问过该网站了,所以它会读取cookie缓存中的语言,解决办法是清了cookie里的缓存。

    另一种是浏览器设置语言的时候读的是排在最上面的语言。

    9fe3bf32305b

    比如上图你设置了英文,但是英文排在了第二的位置,所以它读的是最上面的简体中文。

    03 、总结

    根据上面的实现,我们发现使用资源配置文件实现前端国际化会有以下优缺点:

    优点:在进行语言切换时,速度会很快,不会进行整个页面的刷新,适合静态页面使用。

    缺点:当页面中有动态注入的内容时可能处理起来比较麻烦。每个需要翻译的地方都要加一个class和name属性,比较麻烦。

    能力有限,如有更好的办法,欢迎大家分享出来,一起学习。如果文章对你有帮助,请动动手指关注我哟!

    展开全文
  • 原标题:前端国际化解决方案“填坑日记”来源:懒得安分http://www.cnblogs.com/landeanfen/p/7581609.html如果好文章投稿,点击 → 了解详情前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:...

    原标题:前端国际化解决方案“填坑日记”

    来源:懒得安分

    http://www.cnblogs.com/landeanfen/p/7581609.html

    如果好文章投稿,点击 → 了解详情

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化。如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如:

    vue + vue-i18n

    angular + angular-translate

    react + react-intl

    但现在的情况是老的项目并没有使用这类架构。说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言。最初接到这个任务,并没有太多顾虑,毕竟这种东西有很成熟的解决方案,实现起来难点不会很大。可当真正动起来手来去实现的时候发现一些问题,这里先介绍下我们老平台的架构:MVC+WebApi,MVC项目负责页面渲染,webapi负责数据接口,是一种很传统的架构方式。国际化主要在MVC端去做就好了,可是由于MVC项目里面使用了大量第三方bootstrap组件,几乎95%的组件都是通过js去实现的,比如bootstrapTable,比如bootstrap-select,比如bootstrap-fileinput。如果按照传统的方式,仅仅在MVC里面去实现国际化,那么大量的js代码里面的中文没法统一处理,并且很多第三方组件有自己的本地化local文件,和后端的国际化很难统一处理;可能有人又说,那就前后端分开国际化呗,这种方案博主真的想过,但是想到要维护两套资源文件,果断放弃。最后还是决定直接维护一套,做前端国际化好了。于是在网上搜索基于jquery的国际化,千篇一律,几乎都说的是jquery + jquery.i18n.properties这种方案,既然大家都这么选型,那博主也按照这种思路去做好了。

    在实现的过程中,有很多值得注意和分享的东西,在此写一个填坑笔记,希望对大家有帮助!接下来,博主就一步一步带领大家解决这个过程中遇到的一些坑,如果有这个需求的童鞋可以关注下,可能这些问题你也会遇到。

    一、jquery.i18n.properties通用解决方案

    关于jquery.i18n.properties的使用,网上资料很多,比较完整的使用可以参考 这篇 ,有比较详细的使用说明。这里博主简单概述下过程。

    1、需要引用的js文件

    先在你的项目文件里面添加如下目录结构

    d6897f81f5a793c214506324560b3f17.png

    首先页面引用的js文件如下

    < src="~/s/jquery-1.9.1.min.js">>

    < src="~/Content/i18n/jquery.i18n.properties.js">>

    < src="~/Content/i18n/language.extensions.js">>

    其中jquery-1.9.1.min.js和jquery.i18n.properties.js文件是开源组件,直接去网上找到即可

    jquery.i18n.properties.js

    jquery.js

    第三个文件language.extensions.js是我们自定义的js文件,如果你将国际化的代码直接写在html页面里面,这个文件就是不用的。

    2、html文件和国际化组件的初始化

    这里直接引用上面示例文章里面的代码,首先需要一个切换中英文的标签,比如是一个select

    中文简体

    English

    然后是一些查看效果的html标签

    最后就是我们需要封装的language.extensions.js文件的内容了,里面做了以下几件事:

    初始化页面的时候去当前域的cookie里面取当前浏览器保存语言的cookie,根据取到的当前语言版本去初始化国际化组件,然后初始化select组件的选中值

    注册select组件的change事件,根据当前选中的语言,更新cookie里面的语言信息,然后刷新页面。

    这个文件的内容这里就不展示了,可以参考上面的使用示例文章

    3、资源文件准备

    根据上面的目录可以看出,我们打算将不同的语言的资源文件放到不同语言的文件夹里面,这里暂时不分文件,所有的语言资源放到一个文件common.properties里面,比如内容如下:

    en/common.properties

    searchPlaceholder=Please input serach information

    signOut=Login Out

    station=Station

    partno=Part No

    deion=Deion

    query=Query

    pleaseSelect=Please Select

    add=Add

    edit=Edit

    delete=Delete

    zh-CN/common.properties

    searchPlaceholder=请输入关键字

    signOut=退出

    station=站点

    partno=零件号

    deion=描述

    query=查询

    pleaseSelect=请选择

    add=新增

    edit=编辑

    delete=删除

    貌似大功告成!当你down源码直接在google浏览器里面运行的时候你会发现一个跨域的问题。

    a7bf1694f71819682c292e875c1b3154.png

    要求你在一种webServer里面去访问.properties文件,这个问题你只需要使用任何一种webserver运行即可,比如IIS、Apache、Node的web服务器等。博主的代码是在Visual Studio里面跑的,所以是基于IIS的,当你把代码搬到VS里面跑的时候,第一个问题来了。

    二、坑一:配置IIS对.properties文件的支持

    如果本文仅仅是上面的内容,是没啥意义的。接下来才是本文要介绍的重点!

    将上述代码直接搬到VS里面,运行的时候你会发现第一个问题:

    079955da74c5758de2739869bc09ec78.png

    为什么这里会请求三个properties文件?因为jquery.i18n.properties.js组件支持三种类型的命名方式,这点很多文章都有介绍,组件代码运行的时候会去请求三种规则的properties文件,只要找到任何一种规则的文件都可以读取到里面的内容。按照博主上文给出的文件目录

    bd7fe733bf8f0c0c09eab699f568dbea.png

    根据这个目录,那我们通过 http://localhost:12770/Content/i18n/zh-CN/common.properties 这个url应该能访问到zh-CN/common.properties这个文件,可实际情况确实这样:

    350d4e0cdf060b4268ef194df6b4e458.png

    对于这种IIS报错404的问题,C#程序员肯定是不陌生的,无非就两个原因:

    url不正确,这个目录下面确实没有找到这个资源文件

    文件的类型iis默认不支持,直接拒绝请求

    排除了第一个原因,那么只可能是第二个原因引起的了。那么我们如何处理呢,在网上搜索半天资料,找到一种解决方案:

    6a7a5a97a0662e2b458e950dc910d7b6.png

    这样确实能绕过IIS的文件名验证,但是改源码不是一个好的解决方案,博主有一千个理由来说明改源码的弊端。这种方式肯定不是一个最好的解决方案,于是博主决定另辟蹊径。

    还记得当初博主学习less的时候,iis默认也是不支持.less文件的,于是我们在web.config里面加了如下一些配置:

    a5a82b81f4f503fefe96b53a59bc95cc.png

    这绝对属于同类型的问题,加这个配置是显式告诉IIS,我们系统里面某种后缀的文件需要哪种Processer(处理器或处理组件)去处理,受此启发,那么我们这里的.properties文件的404问题是不是也可以通过此种方式解决?如果需要通过这种思路去解决,首要问题是需要找到.properties文件的mimeType,博主思考,既然是在js里面调用这个.properties文件,那么我们是否可以使用Java的处理机制来处理.properties文件呢,考虑到上面那种将所有.properties替换成.js的处理方式,似乎.properties和.js有很多相似之处,于是我们加上如下一条配置:

    41e56757ff1b34ac76c4860f6413388e.png

    得到结果:

    967f8f1da7fb5d80210c99d7ae8e0283.png

    试验成功,就是这么简单。当然如果发布到IIS,可能需要在IIS的MIME类型里面添加.properties这种类型的映射。

    88cc7514ff111fe29b8a8c0c8dfb3b0c.png

    好了,这个问题就这么愉快的解决了。如果你的WebServer不是基于IIS的,可能没有这个问题,但我想思路或许相通,供参考!

    三、坑二:使用html的data属性初始化国际化内容

    一般情况下,我们标签里面的内容如果要做国际化,需要使用 $(‘#id’).text($.i18n.prop(‘proName’)); 来给标签赋值,现在问题来了,我们开发一个界面,有很多地方都需要去做国际化,我们总不能这样每一个页面每一个标签通过这种方式去赋值吧,这样工作量不是一点大,于是乎博主想,有没有一种比较好的通用的解决方案去给这些需要做国际化的标签统一赋值呢。html的data属性似乎是一个不错的选择!它具有可读性强、可维护性强、兼容jquery的data()方法等优点。比如我们修改国际化组件的方法如下:

    jQuery.i18n.properties({

    name:'common',

    path:'/Content/i18n/'+i18nLanguage+'/',//资源文件路径

    mode:'map',//用Map的方式使用资源文件中的值

    language:i18nLanguage,

    callback:function(){//加载成功后设置显示内容

    console.log("i18n赋值中...");

    try{

    //初始化页面元素

    $('[data-i18n-placeholder]').each(function(){

    $(this).attr('placeholder',$.i18n.prop($(this).data('i18n-placeholder')));

    });

    $('[data-i18n-text]').each(function(){

    //如果text里面还有html需要过滤掉

    varhtml=$(this).html();

    varreg=//;

    if(reg.test(html)){

    varhtmlValue=reg.exec(html)[0];

    $(this).html(htmlValue+$.i18n.prop($(this).data('i18n-text')));

    }

    else{

    $(this).text($.i18n.prop($(this).data('i18n-text')));

    }

    });

    $('[data-i18n-value]').each(function(){

    $(this).val($.i18n.prop($(this).data('i18n-value')));

    });

    }

    catch(ex){}

    console.log("i18n写入完毕");

    }

    });

    通过data属性获取标签,然后对每个标签通过对应的data-i18n-属性进行国际化赋值即可,这里暂时定义了三种类型data-i18n-placeholder、data-i18n-text、data-i18n-value的属性,如果有其他需求,可以增加其他类型。

    然后看下我们html页面的使用

    这样不用写一句标签的赋值代码,即可对标签进行国际化。

    四、坑三:第三方组件的国际化(一)

    对于第三方组件,我们自定义的代码里面的中文要做国际化,我只需要使用$.i18n.prop(‘key’)即可,比如bootstrapTable:

    {

    field: 'AuditEventType',

    title: '业务类型',

    width: '12%'

    }

    直接使用

    {

    field: 'AuditEventType',

    title: $.i18n.prop('bllType'),

    width: '12%'

    }

    即可。这个解决思路很简单,没啥好说的,可是有一些第三方组件,自己有国际化的功能,初始化的时候需要指定国际化的类型,形如:

    $(".date").datetimepicker({

    format:'YYYY-MM-DD',//日期格式化,只显示日期

    locale:'zh-CN'//中文化

    });

    目前想到的解决方案,就是根据cookie里面存储的当前语言来显式赋值

    //获取cookie里面的语言

    varuserLanguage=getlanguageCookie("userLanguage");

    $(".date").datetimepicker({

    format:'YYYY-MM-DD',//日期格式化,只显示日期

    locale:userLanguage=='zh-CN'?'zh-CN':'en-US'//国际化

    });

    如果是多种语言,这里可以在前端自己去处理。

    五、坑四:第三方组件的国际化(二)

    上面介绍了第三方组件初始化时候指定国际化,除此之外,还有另外一种情况,就是很多组件有自己的本地化(关于国际化和本地化的区别,请自行谷歌)文件,它的国际化是通过引用不同的本地化js文件来实现的,比如博主常用的bootstrapTable组件,它的目录:

    b9fe2dc86e50dd08e872635a4dc3d3bd.png

    还有其他组件也是这样,比如:

    64c0d98a7d018d3c7ee5503245939703.png

    71753b7e4261c083d4af0f3fb6c7edf3.png

    那么针对这种情况,我们的国际化该如何实现了,这里博主提供的思路是动态引用js,通过当前cookie里面保存的语言的类型来引用对应语言的js文件,比如针对bootstrapTable,我们这样去动态引用js

    //组件根据国际化动态引入js

    varuserLanguage=getlanguageCookie("userLanguage");

    //如果cookie里面没有,则使用默认值

    if(!userLanguage){

    userLanguage='zh-CN';

    }

    if(userLanguage=='zh-CN'){

    var=$('<>>');

    .attr('src','/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js');

    $('body').append();

    }

    elseif(userLanguage=='en'){

    var=$('<>>');

    .attr('src','/Content/bootstrap-table/locale/bootstrap-table-en-US.js');

    $('body').append();

    }

    如果要想代码写得更加优雅,可以自己去实现前端的抽象工厂,这里只是提供一种实现思路。

    六、总结

    排除了以上几步的困难,我们的国际化在项目里面基本就能正常运行起来了,至于WebApi里面返回消息的中文,如果你也想做国际化,我们可以通过将返回消息封装,统一返回前端处理。本篇文章的“填坑方式”或许不是最好的,但至少给大家提供了一种实现思路,如果大家有更好的实现方式,欢迎留言交流。返回搜狐,查看更多

    责任编辑:

    展开全文
  • JeecgBoot-antd JeecgVue前端国际化

    原官方前端的国际化解决方案:
    http://doc.jeecg.com/2043980

    1.我的需求说明

    在页面中,有个切换语言下拉框,切换语言后,页面切换所选择的语言,并且下次打开默认之前选择语言(目前只要求做到根据浏览器保存到本地。如果需要根据用户,就需要保存到数据库,记录到用户表中)。

    注:

    由于切换语言后,不刷新页面时效果不理想,有些部分内容不会切换,而且我的用户一般切换一次语言后,很少会再次切换语言

    因此我是通过 window.location.reload() 刷新页面使页面重新加载,完成语言切换

    2.版本

    Ant Design Jeecg Vue

    *====*

    当前版本: 2.4.3(发布日期:20210322)

    #### 前端技术

    - 基础框架:ant-design-vue - Ant Design Of Vue 实现

    - JavaScript框架:Vue

    - Webpack

    - node

    - yarn

    - eslint

    - @vue/cli 3.2.1

    - vue-cropper - 头像裁剪组件

    - @antv/g2 - Alipay AntV 数据可视化图表

    - Viser-vue - antv/g2 封装实现

    3.组件国际化

    antd UI 组件国际化

    文档参见【LocaleProvider 国际化

    ant-design-vue 所有语言包可以在 这里 找到

    修改 App.vue 文件

    <template>
      <a-config-provider :locale="locale">
        <div id="app">
          <router-view/>
        </div>
      </a-config-provider>
    </template>
    <script>
      import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
      import enUS from 'ant-design-vue/lib/locale-provider/en_US'
      import enquireScreen from '@/utils/device'
      
      export default {
        data () {
          return {
            locale: enUS,
          }
        },
        created () {
       
          //获取本地缓存中的语言配置,并切换
          let language = this.$ls.get("language");
          if( language == 'zh-CN'){ 
              this.locale =  zhCN
          } else if(language == 'en-US'){ 
             this.locale = enUS
          }
        }
      }
    </script>
    <style>
      #app {
        height: 100%;
      }
    </style>
    

    4.业务文案的国际化需求

    (1) 安装 vue-i18n:

    $ npm install vue-i18n
    

    (2) 创建语言js

    在 src/components/lang/ 中 创建语言js 例如 en-US.js 和 zh-CN.js

    在 en-US.js 和 zh-CN.js 中分别作了如下配置:

    // zh-CN.js
    export default {
      lang: '中文',
    }
    
    // en-US.js
    export default {
      lang: 'English',
    }
    

    (3) 在main.js实例化组件

    //i18n设置
    import VueI18n from 'vue-i18n' 
    import enLocale from '@/components/lang/en-US'
    import zhLocale from '@/components/lang/zh-CN'
    Vue.use(VueI18n)
    // 注册i18n实例并引入语言文件,文件格式等下解析
    
    const messages = {
      'en-US': {
        ...enLocale,
      },
      'zh-CN': {
        ...zhLocale,
      }
    }
    
    const i18n = new VueI18n({
      locale: Vue.ls.get("language", "zh-CN"),
      messages
    })
    
    
    SSO.init(() => {
      main()
    })
    function main() {
      new Vue({
        router,
        store,
        i18n,
        render: h => h(App)
      }).$mount('#app')
    }
    
    

    5.切换语言

    我放在系统设置中,如下图

    在这里插入图片描述

    修改 components/setting/SettingDrawer.vue

    <!-- 增加测试 显示 -->
    <h3 class="setting-drawer-index-title">整体风格设置 {{ $t('lang') }}</h3>
    
    <!-- 增加下拉选择框 -->
    <a-list-item>
        <a-list-item-meta>
            <div slot="title">语言设置</div>
        </a-list-item-meta>
        <a-select size="small" style="width: 80px;" :defaultValue="$t('lang')" @change="handleLanguageChange">
            <a-select-option value="zh-CN">中文</a-select-option>
            <a-select-option value="en-US">英文</a-select-option>
        </a-select>
    </a-list-item>
    
    //script  中的  methods 里增加 handleLanguageChange 切换语言的事件
    handleLanguageChange(lang){
     	//this.$i18n.locale = lang; //改变当前语言  动态无感 切换,,但是有部分内容 不生效,估计我
    	this.$ls.set("language", lang);//将lang 语言存在localStorage里, 
    	//本来想做成,页面不刷新语言自动切换,但是效果不理想,有的内容切换不成功,于是就 做刷新页面操作,这里只缓存语言
    	window.location.reload()
    }
    

    6.使用

    1)文本显示 {{ $t(’…’) }}

    如:

    <h3 class="setting-drawer-index-title">整体风格设置 {{ $t('lang') }}</h3>
    

    2)标签属性使用 :pros="$t(’…’)"

    :defaultValue="$t(‘lang’)" 在属性前 加上 “ : ” 冒号 然后 $t(‘lang’)

    如:

    <a-select size="small" style="width: 80px;" :defaultValue="$t('lang')" @change="handleLanguageChange">
        <a-select-option value="zh-CN">中文</a-select-option>
        <a-select-option value="en-US">英文</a-select-option>
    </a-select>
    

    3)script 中使用 this.$t(’…’)

    使用 this.$t(’…’) 调用

    如:

    // 表头
    columns: [
        {
            title: this.$t('common.field.type'),
            align: "center",
            dataIndex: 'type',
            width: 100,
            scopedSlots: {customRender: 'toI18nText'},
        },
    ]
    

    4)table 列表中使用

    字段结果I18n 处理 (适用固定状态、类型之类)

    由于 customRender: function (t, r, index) { 中 不能调用 this.$t()

    因此,通过 scopedSlots 模板方式 中处理 文本

    // 表头
    columns: [
        {
            title: this.$t('common.field.type'),
            align: "center",
            dataIndex: 'type',
            width: 100,
            scopedSlots: {customRender: 'toI18nText'},
        },
    ]
    

    页面 toI18nText 模板标签

    <a-table
            ref="table"
            size="middle"
            rowKey="id"
            :scroll="{x:true}"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
      
            <span slot="toI18nText" slot-scope="text">
              {{ $t('announcement.typeDict.'+text) }}
            </span>
             
          </a-table>
        </div>
    

    对应的 zh-CN.js 和 en-Us.js

    // zh-CN.js 
    export default {
      lang: '中文',
      announcement: { 
        typeDict:{
          '1': '系统公告',
          '2': '维护公告', 
        }
      }
    }
    
    //  en-Us.js
    export default {
      lang: 'English',
      announcement: { 
        typeDict:{
          '1': 'System Announcement',
          '2': 'Maintain Announcement', 
        }
      }
    }
    

    经过测试发现

    原先 customRender: function (t, r, index) { 中 不能调用 this.$t()

    改成 拉姆达 表达式写法 就能使用this.$t() 如下例子

    customRender: (type) => {
        return this.$t('announcement.typeDict.'+type)
    }
    

    5)传递参数 $t(’…’, {’…’: ‘…’})

    zh-CN.js 和 en-Us.js

    // zh-CN.js 
    export default {
      field:{
      	title: '标题',
      },
      common:{
      	placeholder:{
          input: "请输入{content} !", 
        }
      }
    }
    
    //  en-Us.js
    export default {
    	field:{
      		title: 'Title',
      	},
       common:{
       	placeholder:{
          input: "Please input {content} !", 
        },
      }
    }
    

    页面组件使用 $t(’…’,{‘content’: ‘…’})

    <a-input v-model="model.title" :placeholder="$t('common.placeholder.input',{'content': $t('common.field.title')})"  ></a-input>
                 
    

    试了下 {} {0} 然后直接传参数 发现不行哈。

    6)filters中使用

    <template
        slot="status"
        slot-scope="status">
        <a-badge :status="status | statusLightFilter" :text="status | statusTextFilter(that)"/>
    </template>
    
    data () {
          return {
            that : this,
          }
    },
        
    filters: {
        statusTextFilter(status, that) {
            const statusTextMap =  {
                '0': that.$t('advertisement.status.0'),
                '1': that.$t('advertisement.status.1'),
                '2': that.$t('advertisement.status.2'),
            }
            return statusTextMap[status]
        },
            statusLightFilter(status) {
                const statusLightMap = {
                    '0': 'processing',
                    '1': 'success',
                    '2': 'failed'
                }
                return statusLightMap[status]
            }
    },
    

    7)常用方法

    $t(path, locale, option) // text 文本替换,locale可单独设置语言,option可传参数替换模板
    $tc(path, choice, locale, option) // text+choice 比$t多一个choice,可以选择模板内容(模板内容间用 | 分隔,如 香蕉|苹果|梨,最多只能使用三个选项,下标从0开始,当选项为2个时下标从1开始~~)
    $te(path) // text+exist 判断当前语言包中path是否存在
    $d(number|Date, path, locale) // date 时间格式化
    $n(number, path, locale) // number  数字格式化(货币等)
    
    // 更多细节参考官方文档:https://kazupon.github.io/vue-i18n/api/#vue-injected-methods
    

    7 其他组件国际化

    1)富文本编辑器TinyMCE/ jeditor

    修改 src/components/jeecg/JEditor.vue

    富文本编辑器TinyMCE 默认 是英文,

    对应你需要的语言就要到官方 https://www.tiny.cloud/get-tiny/language-packages/ 下载你需要的语言包,并且导入到你的项目中如:/tinymce/langs/zh_CN.js

    //在script 中的 mounted() 中增加 语言设置
    mounted() {
        this.initATabsChangeAutoReload()
    	
        //根据语言切换
        let language = this.$ls.get("language");
        if (language == "en-US"){
            this.init.language = "en_US"
        } else if (language == "zh-CN"){
            this.init.language = "zh_CN"
            this.init.language_url = '/tinymce/langs/zh_CN.js'
        }
    
    },
    
    展开全文
  • i18n实现前端国际化(实例)

    i18n实现前端国际化(实例)

    vue中使用国际化变量:
    在zh.js和en.js文件配置好之后,就可以全局使用了($t被注册到了vue实例上,传参为属性名)。
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    效果:
    在这里插入图片描述

    展开全文
  • 本文根据神策数据资深前端研发工程师陈宁《前端国际化》的直播整理而成,主要包含以下内容: · 国际化概述 · 国际化技术需求 · 国际化技术模型 · 国际化技术模型实现 一、国际化概述 国际化是做框架,帮助快速...
  • DI18n前端通用国际化解决方案背景前端技术日新月异,技术栈繁多。以前端框架来说有React, Vue, Angular等等,再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中,不同的...
  • 邓敏捷,字节 Starling 国际化平台核心开发者。大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群国际化简介国际化概念国际化 in...
  • 前端国际化的使用

    2021-05-11 15:41:39
    通过i8n插件实现国际化 1。安装i8n插件 2。建立不同语言的js文件,对应的单词翻译。 3。在main.js文件写入 const i18n = new VueI18n({ locale: ‘zh-CN’, // 语言标识 //this.$i18n.locale // 通过切换locale的值...
  • Web前端国际化之jQuery.i18n.propertiesjQuery.i18n.properties介绍国际化是现在Web应用程序开发过程中的重要一环,jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能在不对后端做任何更改的条件下,轻松...
  • 一、背景 vue + element +i18n 二、引入 npm install vue-i18n --save-dev yarn add vue-i18n --save-dev 三、配置 import VueI18n from 'vue-i18n' import Element from '...import enLocale from 'e...
  • 一、前言趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。在这就不谈原理,只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。二...
  • 一、国际化之本地化你的应用 参考网址:https://angular.io/guide/i18n - 使用Angular国际化您的应用程序: 使用内置管道以本地格式显示日期,数字,百分比和货币。 在组件模板中标记文本以进行翻译。 标记要翻译的...
  • 近几年,随着业务的不断发展与市场的快速推广,产品面向的用户越来越多样化,其中不乏很多海外用户,越来越多的产品国际化需求给前端团队带来了新的挑战。 在进行产品国际化开发的过程中,我们...本文将分析前端国际
  • 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化国际化英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的...
  • 阅读目录一、jquery.i18n.properties通用解决方案1、需要引用的...第三方组件的国际化(一)五、坑四:第三方组件的国际化(二)六、总结正文前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国...
  • 前端国际化 VScode i18n Ally 插件使用

    千次阅读 2021-05-11 10:15:20
    前端国际化 VScode i18n Ally 插件使用 1、安装 i8n Ally 插件 2、修改vscode 配置 ,添加如下配置 "i18n-ally.localesPaths": [ "src/locales/lang" ], "i18n-ally.languageTagSystem": "legacy", "i18n-ally....
  • 1.先现在项目中安装vue-i18n的依赖 npm install vue-i18n --save 2.在src下建一个lang的文件夹,并且在其下面... // 引入国际化的包 import ElementLocale from 'element-ui/lib/locale' import enLocale from 'elem
  • 前端时间国际化入门

    2021-10-22 00:29:32
    时间只是幻觉。—— 阿尔伯特·爱因斯坦最近在开发一个需要完善国际化方案的前端项目,在处理时间国际化的时候遇到了一些问题。于是花了一些时间研究,有了这篇文章。不过由于网上关于 JavaScr...
  • VUE项目配置国际化

    2021-08-17 22:38:15
    在项目中往往会有中英文切换,这时候我们会用到国际化。 1.安装 ``` npm install -g vue-i18n ``` 2.新建目录lang文件,分别建立en.js和zh.js文件。 ``` en.js const zh ={ commons: { admin: 'Admin', editor: '...
  • 一、国际化 / i18n 目前国际化,就是开发者写对象,一个key关联若干语种的翻译。相比于浏览器自带的翻译功能,语义更加准确。 “国际化”的简称:i18n(其来源是英文单词 internationalization的首末字符i和n,18为...
  • 前言:springboot整合bootstrap实现国际化 1、导入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <...
  • vue3.0 国际化 i18n

    2021-01-15 09:31:15
    vue3.0 国际化插件i18n
  • 虽然有很多功能强大、模块丰富,但还缺少一个国际化模块。 模块实现: 封装jquery.i18n.propertites.js 为i18n.js layui.define(["jquery"], function (exports) { "use strict"; var $ = layui.jquery; ```...
  • 微信小程序国际化

    2020-12-25 10:35:19
    只是替换静态文本,就是简单的键值匹配,按照这个流程,保证很快上手国际化,语言切换采用的是登录微信小程序时 识别系统语言做出中英文切换,并不是点击切换 1、在 utils 目录下新建一个 i18n.js 文件 // /utils/i18...
  • 网页配置国际化语言 1. 网页直接获取配置文件中的内容 我们在项目中resource文件包下,设置一个: message.properties 这种文件的命名格式是国际默认的。美国:message_zh_CN.properties 中国:message_en_US....
  • 最新项目需要中英文切换,网上找的资料要么不完整,要么就是需要下载积分,由于个人比较穷,所以只能自己动手写一个layui国际化模块。。。。。。在这分享记录一下,复制粘贴即用 废话不多说,直接贴代码 1. 把...
  • 6、实现函数 实现如下函数add,使如下执行都等于9 add(2,3,4)=9 add(2)(3,4)=9 add(2)(3)(4)=9 add(2,3)(4)=9 函数柯里思想。该题关键在于参数长度要为3。 7、算法题 给定一个字符串,请你找出其中不含有重复字符...
  • 基于i18n实现国际化安装依赖准备语言包准备持久化方法导入语言信息获取当前语言创建i18n实例使用i18n实例方式一方式二语言切换组件Vuex的状态管理切换语言组件使用组件总结 假设已经存在一个Vue3.x+ts+sass项目; ...
  • react怎么实现国际化?react-intl插件提供了一套实现react国际化的方法,具体实现如下~~ 一 搭建react环境和下载相应插件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,522
精华内容 16,208
关键字:

前端国际化

友情链接: Ex_HelloMFC.zip