使用VueI18n.js实现国际化

最新推荐文章于 2024-08-22 08:29:31 发布

MasonYyp

最新推荐文章于 2024-08-22 08:29:31 发布

阅读量630

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/make_progress/article/details/100584746

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1、介绍

本文使用Vue.js、VueI18n.js和代码块封装了web国际化。
注意：type="module"是ES6新特性，因此有部分浏览还不支持，例如IE、360浏览器，支持的浏览器有Safari 10.1、Chrome 61、Firefox 60、Edge 16;代码块的使用（import、export）；VueI18n的参数使用。
本文工程在github下载地址：https://github.com/MasonYyp/vueI18n-globalization

参考VueI18n.js官网API：http://kazupon.github.io/vue-i18n/started.html#html
此项目，可以将相关的方法和变量全部修改为function对象，不使用module，即可使用所有浏览器。

2、工程截图

3、源代码

3.1 index.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script type="text/javascript" src="./js/libs/vue-2.6.10.min.js" ></script>
       <script type="text/javascript" src="./js/libs/vue-i18n-8.14.0.min.js" ></script>
   </head>
   <body>
       <div id="nav">
           <button id="change_language" v-on:click="change_language">{{ $t("nav.change_language") }}</button>
           <ol>
               <li>{{ $t("nav.department_software") }}</li>
               <li>{{ $t("nav.department_computer_technology") }}</li>
           </ol>
       </div>
       <footer id="foot">{{ $t("foot.copyright") }}</footer>
   </body>
   
   <script type="module" src="./js/globalization.js" ></script>
</html>

3.2 globalization.js

// 导入配置文件
import configure from "../js/language/language_configure.js";

// 执行主函数
main()

function main(){
globalization();
}

// 国际化
function globalization(){

   var i18n = configure.i18n;

   new Vue({
       el:"#nav",
       i18n: i18n,
       data(){
           return{
               count_local_code:configure.locale_code
           }
       },
       methods:{
           change_language(){
               if(this.count_local_code == configure.language_number){
                   this.count_local_code = 1;
               }else{
                   this.count_local_code = this.count_local_code + 1;
               }
               configure.change_language(this.count_local_code);

// 可以使用 $t调用语言中的参数，但是必须在Vue实例中调用

// alert(this.$t("nav.department_software"));
           }
       }
   });

   new Vue({ i18n }).$mount("#foot");
}

3.3 配置文件language_configure.js

import zh from "../language/messages_zh.js";
import en from "../language/messages_en.js";

/**
* 设置语言
* @param {Object} language 语言
*/
function set_language(language){
   // 保存语言设置
   sessionStorage.setItem("language", language);
   // 切换语言
   i18n.locale = language;
}

/**
* 获得语言
* Return 返回语言
*/
function get_language(){
return sessionStorage.getItem("language");
}

/**
* 获得VueI18n实例
* Return 返回i18n实例和语言编码
*/
function get_i18n(){
   var messages_zh = zh.messages;
   var messages_en = en.messages;

   // 添加所有的语言
   var i18n_messages = {
       zh:messages_zh,
       en:messages_en
   }

   // 设置语言
   var temp_locale = get_language();
   if(temp_locale == null){
       // 默认中文
       temp_locale = 'zh';
   }
   var temp_locale_code = get_language_code(temp_locale);

   // 实例化i18n
   var temp_i18n = new VueI18n({
   locale: temp_locale, // 设置语言
   messages: i18n_messages // 设置数据
   });

   return {"i18n":temp_i18n, "i18n_locale_code":temp_locale_code};
}

/**
* 获得语言编码
* @param {Object} temp_locale 表示自定义的语言符号
* Return 返回语言编码
*/
function get_language_code(temp_locale){
   var temp_locale_code = 1;
   switch(temp_locale){
       case "zh":{
           temp_locale_code = 1;
           break;
       }
       case "en":{
           temp_locale_code = 2;
           break;
       }
   }
   return temp_locale_code;
}

/**
* 修改语言
* @param {Object} temp_local_code 表示语言的编码
*/
function change_language(temp_local_code){
   var temp_local = "zh";
   switch(temp_local_code){
       case 1:{
           temp_local = "zh";
           break;
       }
       case 2:{
           temp_local = "en";
           break;
       }
   }

   // 设置语言
   set_language(temp_local);
}

// 获得i18n实例和语言编码
var global_temp_i18n = get_i18n();
var i18n = global_temp_i18n.i18n;
var locale_code = global_temp_i18n.i18n_locale_code;
// 设置语言种类的个数
var language_number = 2;
export default {i18n, locale_code, change_language, language_number}

3.4 英文数据文件messages_en.js

const messages = {
   nav:{
       change_language:"change language",
       department_software:" software ",
       department_computer_technology:" computer technology "
   },
   foot:{
       copyright:"Henan university 1912 "
   }
}

export default{ messages }

3.5 中文数据文件messages_zh.js

const messages = {
   nav:{
       change_language:"更改语言",
       department_software:" 软件学院 ",
       department_computer_technology:" 计算机学院 "
   },
   foot:{
       copyright:"河南大学 1912 "
   }
}

export default{ messages }