uniapp国际化(html、js、tabbar和navigationBarTitleText)

不甜呐

已于 2025-04-16 14:19:01 修改

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app 前端

于 2022-12-05 17:31:18 首次发布

@不甜呐

本文链接：https://blog.youkuaiyun.com/weixin_55992854/article/details/128187073

uniapp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在uniapp结合Vue3的项目中实现多语言支持，覆盖HTML页面、JS提示及导航栏等，实现语言实时切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果你写的app是用uniapp+vue3来搭建的，这篇国际化一定适合你！

问题描述：因为app有海外用户所以需要配置国际化语言满足客户需求。

解决方案: 在uniapp中内置i18n多语言的配置，只要用户能看见的字(包括html页面,js的一些提示代码，tabbar导航和navigationBarTitleText)都要实现国际化，并且可以做到实时切换语言。

安装

如果是创建项目的时候选择的模板是uni-ui项目，则不需要npm vue-i18n。

npm install vue-i18n --save

下面开始i18n的配置，参考网址：uni-app官网

文件目录：

1.配置语言包

代码配置

为了方便把多语言的配置代码写在了locale/index.ts里面，之后在mian.js中引入

import {
	createI18n
} from 'vue-i18n'

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'


const messages = {
	en,
	'zh-Hans': zhHans,
	'zh-Hant': zhHant
}

const i18n = createI18n({
	locale: uni.getLocale() || 'zh-Hant', // 获取已设置的语言，如果没有默认繁体
	messages
})

export default i18n

在main.js中引入(因为项目是用的vue3，可以只配置vue3)

import App from './App'
import i18n from '@/locale/index'

// vue2
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    i18n,
	...App
})
app.$mount()
// #endif

// vue3
// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(i18n)
	return {
		app
	}
}
// #endif

在html页面使用

$t是i18n自带的全局配置的方法，可以在html中直接使用

<view class="title">{{$t('index.hello')}}</view>

在js或者ts中使用

vue2在js中多语言用的是this.$t()，但是vue3中this为undefined，所以我这里用的是下面的方法

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

    const test = () => {
        console.log(t('index.home'))
    }
</script>

在pages.json中使用 %% 占位

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "%index.home%"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "%index.about%"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "%index.home%"
			},
			{
				"pagePath": "pages/about/about",
				"text": "%index.about%"
			}
		]
	}
}