子厚
子厚
  • 发布:2019-07-24 18:17
  • 更新:2019-07-24 18:17
  • 阅读:4482

uni-app使用vue-i18n实现小程序端国际化

分类:uni-app
  1. vue-i18n的基础写法就不详细说明了,相关文档请到官网查看
  2. 官网的文档真的写的还不错,闲话少说直接上代码,我将主要代码分成三个文件,index.js,zh-CHS.js,en-US.js:

index.js主代码

import Vue from 'vue'  
import VueI18n from 'vue-i18n'  
  
Vue.use(VueI18n)  
  
// 国际化  
const i18n = new VueI18n({  
  locale: 'zh-CHS', // set locale  
  messages: {  
    'zh-CHS': require('./zh-CHS.js'), // 中文语言包  
    'en-US': require('./en-US.js') // 英文语言包  
  },  
  silentTranslationWarn: true  
})  
  
// window.i18n = i18n  
  
export default i18n

中文zh-CHS.js

module.exports = {  
  "home": "首页"  
}

英文en-US.js
module.exports = {
"home": "Home"
}
3. 在mian.js中引用

import Vue from 'vue'  
import App from 'App'  
import i18n from './language'  
  
Vue.config.productionTip = false  
Vue.prototype.i18n = i18n   
  
App.mpType = 'app'  
  
const app = new Vue({  
		i18n,  
    ...App  
})  
app.$mount()
  1. 使用过vue-i18n的同学都知道,使用i18n-loader用于单文件或组件中,自定义块的语言环境信息,而uni-app并不支持
    无奈要实现国际化,读了vue-i18n-loader的源码,但其中并没有时间部分,只有对不同文件的解析,官网也没有详细写,然后只能自己实现了,悲催呀!
    各种摩擦,整了一天终于出来了,还是官网一个例子给我了启发:
    官网例子:
new Vue({  
  i18n: new VueI18n({  
    locale: 'en',  
    messages: {  
      en: { hello: 'hi there!' },  
      ja: { hello: 'こんにちは!' }  
    }  
  }),  
  data: { path: 'hello' }  
}).$mount('#string-syntax')

根据这个实现了功能。

5.最终实现代码我放github上,地址https://github.com/sjpeter/web/blob/master/vue/i18n/main.vue
6. 这种写法应该也适用于其他端,但为测试。

1 关注 分享
1***@qq.com

要回复文章请先登录注册