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("") 手動掛載
});