uniapp 国际化(i18n) 设置tabbar不生效 解决方案

下载 vue-i18n

npm/cnpm i vue-i18n

在pages.json中设置

"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
注: 国际化文件应该与index 同级 不然tabbar不生效

目录结构.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
}

页面使用

切换国际化 在切换按钮的页面内