下載 vue-i18n
npm/cnpm i vue-i18n
在pages.json中設(shè)置
"tabBar": {
"color": "#000000",
"selectedColor": "#6D45E1",
"backgroundColor": "#FFFFFF",
"position": "bottom",
"list": [{
"pagePath": "pages/home/index",
"text": "%public.home%"
},
{
"pagePath": "pages/trusteeship/index",
"text": "%public.trusteeship%"
},
{
"pagePath": "pages/assets/index",
"text": "%public.assets%"
},
{
"pagePath": "pages/my/index",
"text": "%public.my%"
}
]
},
在main.js 中
import App from './App'
import messages from './locale/index'
let i18nConfig = {
locale: uni.getLocale(),
messages
}
// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
i18n,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
const i18n = createI18n(i18nConfig)
export function createApp() {
const app = createSSRApp(App)
app.use(i18n)
return { app }
}
// #endif
.locale/index
注: 國際化文件應(yīng)該與index 同級 不然tabbar不生效
目錄結(jié)構(gòu).png
// en英語 por 葡萄牙 es西班牙
import en from './en.json'
import por from './por.json'
import es from './es.json'
import zh from './zh-Hans.json'
export default {
en,
por,
es,
'zh-Hans': zh
}
頁面使用
<template>
<view> {{ $t('demo') }} </view>
</template>
切換國際化 在切換按鈕的頁面內(nèi)
<script setup>
// item對應(yīng) local文件名
const selectLang = (item) => {
uni.setLocale(item.value)
i18n.locale.value = item.value;
}
</scirpt>
