安装uni-i18n插件
npm install uni-i18n
main.js文件中引入并初始化VueI18n
///main.js
import messages from './language/index'
let i18nConfig = {
locale: uni.getLocale(),
messages
}
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
// 国际化
app.$mount()
建立相关的语言文件夹，存放.js语言文件
image.png
定义index.js在设置全局变量
///index.js
import en from './enHans.json'
import zhHans from './zh-Hans.json'
export default {
'zh-Hans': zhHans,
en,
}
在页面中应用
页面模板中使用 t('')
<template>
<view class="container">
<view class="title">{{$t('index.title')}}</view>
</view>
</template
computed: {
locales() {
return [{
text: this.$t('language.zh'),
tip:this.$t('language.zh_tip'),
code: 'zh-Hans',
}, {
text: this.$t('language.en'),
tip:this.$t('language.en_tip'),
code: 'en'
}]
}
},
onLoad() {
let systemInfo = uni.getSystemInfoSync();
this.systemLocale = systemInfo.language;
this.applicationLocale = uni.getLocale();
uni.onLocaleChange((e) => {
this.applicationLocale = e.locale;
})
},
注：语言API
uni-app内置了一批与国际化相关的API和生命周期。
注意要区分系统语言和应用语言的概念。
可以得到设备OS的语言、运行宿主host的语言以及应用自身的语言。
获取应用当前使用的语言
设置应用语言
当前应用语言发生变化时，触发回调。也就是uni.setLocale执行时。
Vue页面 i18n代码提示
image.png
pages.json i18n代码提示
image.png
