使用VueI18n.js实现国际化

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>
    <!-- 导入js 注意tpye -->
    <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 }
 


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值