先在根目录新建locale文件夹,再新建index.js和en.json、zh-Hans.json文件。文件内容:
index.js

import en from '@/locale/en.json'
import zhHans from '@/locale/zh-Hans.json'

export default {
	en,
	'zh-Hans': zhHans
}

en.json和zh-Hans.json就是你的英文字典和简体中文字典了,如果有其他语言需求可以自行再添加
en.json

{
	"locale.auto": "System",
	"locale.en": "English",
	"locale.zh-hans": "中文",
}

zh-Hans.json

{
	"locale.auto": "系统",
	"locale.en": "English",
	"locale.zh-hans": "中文",
}

接着是vuex store的管理,在根目录建立store文件夹新建index.js,内容为

import {createStore } from 'vuex'
const store = createStore({
	state: {
		getLocale: 'zh-Hans'
	},
	getters: {
		getLocale: state => state.getLocale,
	},
	mutations: {
		SET_LOCALE: (state, getLocale) => {
			state.getLocale = getLocale
		}
	}
})
 
export default store

接着在main.js中引入i18n国际化 把刚新建的locale/index引入,区分vue2 和 vue3,用uniapp独有判断# ifdef 和 # ifndef 使用。然后用的vuex做全局状态管理,这里引入了store

import messages from './locale/index'
import App from './App' 
let i18nConfig = {
  locale: uni.getLocale() || 'zh-Hants',// 获取已设置的语言,没有就默认简体中文
  messages
}

// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    i18n,
  ...App
})
app.$mount()
// #endif

import store from './store'

// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  app.use(store)
  return {
    app
  }
}
// #endif

vuex这样方便在任何其他页面使用getLocale再结合vue computed来实时更新国际化数据和模版数据
比如在首页,我们要先引入computed 和 store

    import { useI18n } from 'vue-i18n'
    import { useStore } from 'vuex'
    import { computed } from 'vue'
	
	const store = useStore()
    const { t } = useI18n()
    const applicationLocale = computed(() => store.state.getLocale)

在页面template里 模版只要写{{$t(‘你在字典Json里定义的key’)}},例如:

<template>
	<h1>{{$t('index.company'}}</h1>
</template>

而在 v-for的循环里就可以根据上面获取的动态applicationLocale来更新数据,比如

<script>
const list = {
	"title":"你好世界",
	"title_en":"hello world"
}
</script>
<view v-for="(item,index) in list" :key="index">
	{{ applicationLocale?item.title:item.title_en }}
</view>

另外在直接写值和变量的地方 这么写

<uni-title type="h1" :title="t('index.title')"></uni-title>
const name = t('index.title')

补充navigationBarTitleText和tabbar 国际化字典写法

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "%index.indexTitle%"
            }
        }
    ],
    "tabBar": {
            "fontSize": "14px",
            "color": "#7A7E83",
            "selectedColor": "#1d71ff",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "/static/home.png",
                "selectedIconPath": "static/homehl.png",
                "text": "%app.nav1%"
            }]
        },
}

但是tabbar 并不会根据i18n locale变更热更新,需要我们自定义tabbar来做热更新,例如

// #ifdef MP-WEIXIN
        // 响应式 TabBar 标题
        let navUrls = [
            'pages/tabbar1/index', //你的tabbar路径
            'pages/tabbar2/index',
            'pages/tabbar3/index',
            'pages/tabbar4/index',
        ]
        
        const tabTitles = computed(() => [
            t('tab.tab1'), //你自定义的tabbar 标题
            t('tab.tab2'),
            t('tab.tab3'),
            t('tab.tab4')
        ])
        
        // 获取当前页面栈
        const pages = getCurrentPages()
        // 获取当前页面对象
        const currentPage = pages[pages.length - 1]
        // 获取路由路径
        const curRoute = currentPage.route        
        // 更新 TabBar 的方法
        const updateTabBar = () => {           
            tabTitles.value.forEach((title, index) => {
                uni.setTabBarItem({
                    index,
                    text: title
                })
            })            
        }        
            
        if (navUrls.includes(curRoute)) {
            // 监听语言变化
            watch(locale, updateTabBar)
            // 初始化时更新一次 
            updateTabBar()
        }
        // #endif

好了 暂时分享这么多,后续再补充

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐