踩坑vue国际化（V18n）+ jquery国际化（jquert.i18n.properties.j

Jeff 发布于2019-08-26 13:33 / 1893人阅读

摘要：首先新建一个存放语言的文件目录把提取后的中文英文放在对应的文件中如下图通过调用内部方法，最后别忘了在中引入，绑定在实例上。注意这里养成良好的编程习惯，在写逻辑判断的时候，不要根据中文去判断，不然做国际化要改起来很麻烦。

目前公司在搞国际化，虽然刚开始接触，但还是遇到了一些问题，如对你有帮助，烦请点个赞，谢谢。

先分享一下vue的国际化，目前vue的国际化采用的是vue-i18n。
首先新建一个存放语言的文件目录,把提取后的中文、英文放在对应的文件中如下图：

通过Vue.use调用内部install方法，最后别忘了在main.js中引入，绑定在vue实例上。
在组件的html中语法:

在js中语法:

在js中调用 this.$i18n.locale = language（例：en_US，跟语言文件export出的对象名称保持一致）实现修改语言。

注意这里：
1、养成良好的编程习惯，在写逻辑判断的时候，不要根据中文去判断，不然做国际化要改起来很麻烦。比如使用if (xxx === "中文")、xxx.indexof(‘中文’)、switch(xxx) { case ’中文‘: }等；
2、在组件created之后mounted之前V18n才会执行替换对应的语言，就意味着有些人在data（）里面用中文初始化了一些属性，但是此时V18n还没有执行，于是一些属性被赋值成了$t("xxxxx")，即键值。

如图，我在data中初始化了title属性，然后在created时候打印该属性，发现控制台报了2个警告，然后该属性被赋值成了键值。解决方案就是：在data中初始化时不指定默认值，在mounted的时候进行赋值就ok了

  mounted() {
    setTimeout(() => {
      console.log("mounted():"执行);
      let ckText = {
        title: this.$t("pro_container.test"),
        hoverText: this.$t("pro_container.94"),
        AvgArr: []
      };
      this.ckText = ckText;
    }, 20);
  }

之后就可以手动调用this.$i18n.locale = en_US方法实现中英文切换了，也可以根据cookie去赋值.

分享一个kiwi插件，kiwi是一款提取替换中文的插件，喜欢的也可以试试，十分好用，大家可以看一下链接中的文档。

最后简单说一下jq的国际化吧，引入jquery.i18n.properties.js文件,配置项如下：

    function loadI18nProperties(lang) {
        $.i18n.properties({
            name: "strings", // 对应国际化文件名称
            path: "/static/js/i18n/", // 对应国际化文件目录
            mode : "map", //用Map的方式使用资源文件中的值
            language: lang, // 调用国际化语言
            callback: function() { // 回调函数
            }
    });
    $(document).ready(function() {
        loadI18nProperties("zh_CN");
    });

name属性指的是国际化的文件名，jq的存放语言的文件是.properties为后缀的，以上面的例子，语言文件名为strings_en_US、strings_zh_CN。如果path写的不对的话，会报一个跨域的错误，提示让你去修改服务器配置文件去支持.properties文件，这里注意一下就好了。其他的在html中使用自定义属性方式赋值，js中就是简单的变量的方式。修改语言，就是将loadI18nProperties（lang）传递参数就去就可以了。

// html

// js中
var Title = $.i18n.prop("js.UserName");

专线服务云服务器 V18n vue-i18n jQuery18 初踩坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109020.html

前端通用国际化解决方案

摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

lingdududu 2019-08-20 15:46 评论0 收藏0
前端常用插件、工具类库汇总（下）

摘要：上一篇前端常用插件工具类库汇总上内容摘要动画库滚动库轮播图滚屏弹出框消息通知下拉框级联选择器颜色选择器时间日期处理表单验证分页插件本篇延续上一篇的内容继续给大家带来一系列关于前端插件工具类的内容。 showImg(https://segmentfault.com/img/bVbjsMh?w=900&h=383); 前言对本文感兴趣可以先加个收藏，也可以转发分享给身边的小伙伴，以后遇到...

ideaa 2019-08-23 13:08 评论0 收藏0
前端国际化的另类方式

摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。关于国际化一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。前不久做了一个国际化的项目，基于...

FullStackDeveloper 2019-08-23 13:09 评论0 收藏0
前端国际化的另类方式

摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。关于国际化一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。前不久做了一个国际化的项目，基于...

everfight 2019-08-02 11:59 评论0 收藏0
前端国际化的另类方式

摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。关于国际化一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。前不久做了一个国际化的项目，基于...

blastz 2019-08-29 17:14 评论0 收藏0