jquery i18n（前端国际化）

最新推荐文章于 2025-07-10 11:58:56 发布

醉卧温柔乡

最新推荐文章于 2025-07-10 11:58:56 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery cookie 国际化前端 velocity

本文链接：https://blog.youkuaiyun.com/qq_29968677/article/details/78779736

前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery结合Velocity语法实现前端国际化。通过从cookie获取语言信息，动态加载相应的资源文件，如messages_en_US.properties和messages_zh_CN.properties，然后在JavaScript中使用prop方法调用配置文件中的键值，完成前端的国际化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天在做前端js的国际化的时候，因为遇到了需要从cookie中获取语言信息再进行资源加载的情况，索性就直接将判断的条件以及i18n的初始化写到了index页面中，这里是velocity的语法。

<script src="$link.contextPath/assets/javascripts/jquery/jquery.min.js?v=$appUitl.revision"></script>
<script src="$link.contextPath/assets/javascripts/jquery-i18n-properties/jquery.i18n.properties.js?v=$appUitl.revision"></script>
#foreach($gc in $request.getCookies())
    #if($gc.value=='zh_CN')
        <script src="$link.contextPath/assets/javascripts/jquery-validation-engine/js/jquery.validationEngine-zh_CN.js?v=$appUitl.revision"></script>
        <script>
            $.i18n.properties({//加载资浏览器语言对应的资源文件
                name : 'messages', //资源文件名称
                path : '$link.contextPath/i18n/', //资源文件路径
                mode : 'map', //用Map的方式使用资源文件中的值
                language : 'zh_CN',
            });
        </script>
    #elseif($gc.value=='en_US')
        <script src="$link.contextPath/assets/javascripts/jquery-validation-engine/js/jquery.validationEngine-en_US.js?v=$appUitl.revision"></script>
        <script>
            $.i18n.properties({//加载资浏览器语言对应的资源文件
                name : 'messages', //资源文件名称
                path : '$link.contextPath/i18n/', //资源文件路径
                mode : 'map', //用Map的方式使用资源文件中的值
                language : 'en_US',
            });
        </script>
    #end
#end

其中加载的资源文件为
这里写图片描述
这样就成功了，再在js中通过prop方法调用配置文件中的key值就行了

var message = $.i18n.prop('index.modal.message')

配置文件中

messages_en_US.properties

index.modal.message=Choose

messages_zh_CN.properties

index.modal.message=请选择项目

大功告成