uniapp vue3 i18n国际化开发记录
先在根目录新建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
好了 暂时分享这么多,后续再补充
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)