uniapp国际化以及在setup函数中的用法

uniapp本身就支持vue-i18n的国际化功能，只需稍作配置即可。虽说简单，但其中也有不少需要注意的。

目录结构

文件目录

┌ 根目录
|——locale
|  ├ index.js
|  ├ en.json
|  └ zh-Hans.json
|——pages
|——App.vue
|——main.js

1.设置main.js

import App from './App'
import messages from './locale/index'

let i18nConfig = {
  locale: 'en',
  messages
}

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
	store,
	...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

2.添加locale配置文件

// locale/index.js
import en from './en.json'
import zhHans from './zh-Hans.json'
export default {
	en,
	'zh-Hans': zhHans,
}

// locale/zh-Hant.json
{
  "index.home": "首页",
  "index.share": "分享",
  "index.my": "我的"
}

// locale/en.json
{
  "index.home": "Home",
  "index.share": "Share",
  "index.my": "My"
}

3.添加语言切换组件

<template>
    <view class="top-bar">
        <view class="left">
            <view class="toggle" @click="changeLocal()">
                <view class="item">中</view>
                <view class="item">En</view>
                <view class="active" :class="{open: locale=='en'}"></view>
            </view>
        </view>
        <view class="center">
            {{$t("index.title")}}
        </view>
        <view class="right" style="width:100rpx;">
            
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default{
    data(){
        return {
            locale: uni.getLocale()
        }
    },
    computed:{
      ...mapState('app',['locale'])  
    },
    mounted(){
        const c = this.$store.state.app.locale
        const c1 = uni.getLocale()
        this.changeLocal(c)
        uni.setNavigationBarTitle({
            title: this.$t("index.home")
        })
    },
    methods:{
        changeLocal(l){
            const c = l ?l: this.locale=='en'?'zh-Hans':'en'
            uni.setLocale(c);
            this.$i18n.locale = c;
            this.locale = c
            uni.setTabBarItem({
                index: 0,
                text: this.$t("index.home")
            })
            uni.setTabBarItem({
                index: 2,
                text: this.$t("index.share")
            })
            uni.setTabBarItem({
                index: 4,
                text: this.$t("index.my")
            })
            if(!l){
                uni.reLaunch({
                    url: "/pages/home/home"
                })
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.top-bar{
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#fff;
    background-color: $uni-color-primary;
    padding: 0 20rpx;
    .toggle{
        height: 60rpx;
        width: 100rpx;
        background-color: rgba(0,0,0,.2);
        border-radius: 60rpx;
        display: flex;
        color: #fff;
        position: relative;
        padding: 0 5rpx;
        .item{
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 10;
            font-size: 26rpx;
            line-height: 60rpx;
        }
        .active{
            position: absolute;
            left: 5rpx;
            top: 5rpx;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50rpx;
            background: $uni-color-primary;
            transition: all .3s;
            &.open{
                transform: translateX(50rpx);
            }
        }
    }
}
</style>

uniapp的vue3版本中的setup中的用法

<script setup>
import {useI18n} from 'vue-i18n'
const {t} = useI18n()

console.log(t('index.home'))
</script>

注意事项

全部的注意事项请移步到uniapp官网
https://uniapp.dcloud.net.cn/tutorial/i18n.html

1、小程序下不支持底部菜单国际化方案，但可以使用设置tabbar和navigationbar的API来设置文字。或者废弃原生tabbar和navigationbar，使用自定义方式。
2、切换语言后，某些已经打开过的tab页面有缓存，存在更新不及时问题，所以上面例子中每次切换强制reLaunch到首页。
3、uniapp自带组件默认翻译了英文版本，如果想翻译成其他自定义语言，请参考uniapp i18n