- vue-i18n的基础写法就不详细说明了,相关文档请到官网查看
- 官网的文档真的写的还不错,闲话少说直接上代码,我将主要代码分成三个文件,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()
- 使用过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. 这种写法应该也适用于其他端,但为测试。
0 个评论
要回复文章请先登录或注册