j***@gfarmsh.com
j***@gfarmsh.com
  • 发布:2019-06-12 01:22
  • 更新:2019-06-12 01:22
  • 阅读:2103

使用多国语言版 i18n

分类:uni-app

最近项目需要用到多国语言版本,查看了很多资料,总结了下:
使用多国语言,我们可以使用vue-i18n插件

在main.js中加入
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh_CN',
messages: {
'zh_CN':require('@/static/language/zh_CN.json'),
'en_us':require('@/static/language/en_us.js'),
}
})
总体的测试main.js如下:
import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
Vue.config.productionTip = false
import connect from '@/common/connect/connect.js';
// Vue.use(connect)
Vue.prototype.$connect = connect.connect;
const i18n = new VueI18n({
locale: 'zh_CN',
messages: {
'zh_CN':require('@/static/language/zh_CN.json'),
'en_us':require('@/static/language/en_us.js'),
}
})

Vue.prototype._i18n = i18n
App.mpType = 'app'
// import number_format from '@/static/js/number_format.js';
// Vue.prototype.$number_format = number_format;
const app = new Vue({
i18n,
...App
})
app.$mount()

在static下新建language/zh_CN.json 和en_us.json

json文件如下:
{
"index":{
"activeTitle":"活动体验",
"articleTitle":"热点推荐"
}
}

接下来就是在vue页面调用json数据
computed:{
i18n(){
return this.$t('index');
}
},

在template下用掉i18n.activeTitle,例如:
<text>{{ i18n.activeTitle }}</text>

PS:运行时可能会遇到 文件找不到vue-i18n的情况
安装方法详见:https://uniapp.dcloud.io/frame?id=npm支持

到此就能够正常的完成i18n的使用。

0 关注 分享

要回复文章请先登录注册