51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
JS代码
当前位置:首页>实用代码>JS代码>

Vue实现国际化多语言开发

时间:2017-08-14 11:21点击:
Vue是现如今比较流行的前端开发框架,具体怎么使用本文就不多介绍了,现在主要分享下自己在开发中所用到的国际化多语言开发,环境使用vue2.0,vue-i18n,vue-resource。

引入必要插件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.use(VueI18n);


JSON语言包


//中文JSON zh-cn.json
{
    "userName":"用户名",
    "password":"密码",
    "login":"登录",
    "nav":{
        "home":"首页",
        "news":"资讯中心",
        "products":"产品中心",
        "about":"关于我们"
    },
    "week":["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
}
//英文JSON en-us.json
{
    "userName":"UserName",
    "password":"Password",
    "login":"Login In",
    "nav":{
        "home":"Home",
        "news":"News",
        "products":"Products",
        "about":"About Us"
    },
    "week":["Sun","Mon","Tues","Wed","Thur","Fri","Sat"]
}


语言包引用


let lang='zh-cn';
this.$http.get('/lang/' + lang+'.json').then(function(res){
    if (Object.keys(res.data).length === 0) {
        console.log('Language Package Error!!')
    } else {
        Vue.locale(lang,res.data)
    }
}).then(function(err){
    console.log('Server Connect Error!!');
})


HTML使用


<label>{{$t('userName')}}:<input type="text" /></label>
<label>{{$t('password')}}:<input type="password" /></label>
<input type="button" :value="$t('login')" />

<ul>
    <li>{{$t('nav.home')}}</li>
    <li>{{$t('nav.news')}}</li>
    <li>{{$t('nav.products')}}</li>
    <li>{{$t('nav.about')}}</li>
</ul>

<table>
    <tbody>
        <tr>
            <th v-for="n in 6">{{$t('week['+n+']')}}</th>
        </tr>
        <tr>
            ……
        </tr>
    </tbody>
</table>

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开