I18国际化一、国际化使用方案 uni-app是基于vue.js的，因此国际化的方案也是使用的 i18n 插件
二、i18n配置及使用 1.引入i18n插件依赖 首先，我们将i18n插件引入到项目中，安装依赖的方式就不多赘述了，我使用的是npm安装
npm install vue-i18n --save
1
2.配置 因为项目里面全部都是需要用到这个插件的，所以封装了一个文件
en 里面的文件是分模块处理的，为了后期语言删减或修改更好的维护
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages() {
const locales = require.context('.', true, /[A-Za-z0-9-_,\s]+\/index\.js$/i)
const messages = {}
locales.keys().forEach(key => {
messages[key.replace('./', '').replace('/index.js', '')] = locales(key).default
})
return messages
}
// console.log(Object.entries(loadLocaleMessages().en).reduce((prev,[k,v])=>`${prev}\n"${k}","${v}"`,'"中文","English"'))
const locale = process.env.VUE_APP_I18N_LOCALE || (process.env.NODE_ENV === 'production' ? 'id' : 'zh')
const i18n = new VueI18n({
locale,
fallbackLocale: locale,
messages: loadLocaleMessages()
})
let lang = uni.getStorageSync("lang") || "es"
i18n.locale = lang
Vue.prototype._i18n = i18n
export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
然后在main.js里引入并挂载
import i18n from './i18n';
const app = new Vue({
i18n,
store,
...App
})
1
2
3
4
5
6
7
2
3
4
5
6
7
ndex.js里面已经都给配置好了，默认语言设置，也可以针对手机系统语言设置，最最主要的是上面的loadLocaleMessages()方法，返回不同的语言
下面是en或es里面的文件内容
export default {
"验证码":"Verification Code",
"再次搜取":"Reacquire",
"工作信息":"Work info",
"经济来源":"Source of Income",
"收益水平":"Income Level",
"公司电话":"Company Phone",
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
export default {
"验证码":"Código de verificación",
"再次搜取":"Volver a adquirir",
"工作信息":"Información de trabajo",
"经济来源":"Fuente de ingreso",
"收益水平":"Nivel de ingreso",
"公司电话":"Teléfono de la empresa",
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
使用(你快要成功了，最后一步)
<view class="title">
{{ $t("验证码") }}
</view>
1
2
3
2
3