vue实现国际化（不使用脚手架的情况）

目标：在不使用脚手架的情况下用vue和vue-i18n实现国际化，并将选择的语言保存到cookie中

效果：

 

html

<div id="app">
   <button v-on:click="selectLanguage('zh-CN')">中文</button>
   <button v-on:click="selectLanguage('en-US')">英文</button>
   {{$t("hello")}}
</div>
        
<script type="text/javascript" src="js/language.js" ></script>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-i18n.min.js" ></script>
<script src="js/test.js"></script>

 

language.js：用来存放中英文

var messages1 = {
    'zh-CN': {
        hello:'好好学习，天天向上！'
    }
}
var messages2 = {
    'en-US': {
        hello:'good good study ,day day up!'
    }
}

 

test.js

$(function(){
    var messages = {　　//将language.js的两个对象合并
        'zh-CN':messages1['zh-CN'],
        'en-US':messages2['en-US'],
    }
    var i18n = new VueI18n({　　//创建vue-i18n
        locale: getCookieValue("lang"),　　　//locale:'' 表示使用的语言  getCookieValue("lang")是通过下面写的方法来获取字段名为“lang”的cookie值
        messages　　//语言包
    })
    function getCookieValue(name){　　//传入需要获取cookie值的字段名可获取cookie值
        var strCookie=document.cookie;
        var arrCookie=strCookie.split(";");
        for(var i=0;i<arrCookie.length;i++){
            var c=arrCookie[0].split("=");
            if(c[0]==name){
                return c[1];
            }
        }
        return "";
    }
    var lang = getCookieValue("lang");
    if(lang==''){
        document.cookie="lang=zh-CN";　　//当第一次使用时，给cookie添加lang字段，并设值为‘zh-CN’
    }
    console.log(lang);
    
    var app = new Vue({ 
        i18n,　　//将创建的i18n挂载进vue中
        data:{
            
        },
        mounted:function(){
            
        },
        methods:{
            selectLanguage:function(lang){
                i18n.locale = lang
                document.cookie="lang="+lang;
            }
        }
    }).$mount("#app");　　//$.mount("") 手动挂载
});

 

转载于:https://www.cnblogs.com/huasonglin/p/9646873.html