uni-app 国际化配置

最新推荐文章于 2025-02-15 15:36:26 发布

原创最新推荐文章于 2025-02-15 15:36:26 发布 · 1.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

本文详细介绍了如何在基于Vue2的uni-app项目中配置国际化，包括创建locale文件、在Vue2和Vue3中使用i18n、页面内语言切换以及在pages.json中应用多语言。

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

前言

我创建的模板是基于vue2的模板，uni-app模板内部已经包含了vue-i18n，所以不需要通过npm方式安装vue-i18n。

1. 创建locale文件目录

ps：语言包文件一定要跟index.js同级，不然在pages.json设置语言将不生效。

├── locale/
│   ├──zh-Hans.json // 中文简体
│   ├──pt-BR.json // 巴西葡萄牙语
│   ├──index.js

zh-Hans.json文件


{
"locale.zh-hans": "Chinês",
	"locale.pt-BR": "Português",
}

pt-BR.json文件


{
	"locale.zh-hans": "简体中文",
	"locale.pt-BR": "葡萄牙语",
}

index.js

// vue2配置
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 国际化 json 文件
import zhHans from './zh-Hans.json' // 中文简体
import ptBR from './pt-BR.json' // 巴西葡萄牙语
const messages = {
	'zh-Hans': zhHans,
	'pt-BR': ptBR,
}
const i18nConfig = {
	locale: uni.getLocale(), // 获取已设置的语言
	messages
}
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
export default i18n

// vue3配置
import { createI18n } from 'vue-i18n'
// 国际化 json 文件
import zhHans from './zh-Hans.json' // 中文简体
import ptBR from './pt-BR.json' // 巴西葡萄牙语
const messages = {
	'zh-Hans': zhHans,
	'pt-BR': ptBR,
}
const i18nConfig = {
	locale: uni.getLocale(), // 获取已设置的语言
	messages
}
const i18n = createI18n(i18nConfig)
export default i18n

main.js 引入

// vue2
import App from './App'
import Vue from 'vue'
// 国际化
import i18n from './locale/index.js'
Vue.use(i18n)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	i18n,
	...App
})
app.$mount()

// vue3
import { createSSRApp } from 'vue'
import i18n from './locale/index.js'
export function createApp() {
  const app = createSSRApp(App)
	app.use(i18n)
  return {
    app
  }
}

2. 在页面使用

ps: $t()是i18n自带方法，可以全局使用。

在页面使用

<template>
	<view>{{$t('locale.pt-BR')}}</view>
</template>

在js使用

<script>
	export default {
		onLoad() {
			const locale = this.$t('locale.pt-BR')
			console.log(locale);
		}
	}
</script>

3.切换语言

ps: 页面中设置语言后需要调用this.$i18n.locale='zh-Hans’后生效。

<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{$t('locale.pt-BR')}}</text>
			<button @click="langChange('zh-Hans')">简体中文</button>
			<button @click="langChange('pt-BR')">葡萄牙语</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			langChange(lang) {
				uni.setLocale(lang)
				this.$i18n.locale = lang
			}
		}
	}

</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

</style>

4. 在pages.json中使用 %% 占位

ps：语言包文件一定要跟index.js同级，不然在pages.json设置语言将不生效。

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