uniapp+vue3+vue-i18n国际化使用方法（史上最全）

说明：此教程只针对uniapp + Vue3版本的国际化配置

重点：vue3一定要在messages中将legacy属性设置为false

一、建立国际化文件

在src目录下新建locale目录 ，在locale目录下新建 index  、 en.json 、zh-Hans.json三个目录，index为入口文件

en.json为英文配置文件

zh-Hans.json为中文简体配置文件

（需要其他语言请自行建立json文件）

index文件配置，此文件为入口文件，注意，vue3一定要将legacy设置为false，意思为声明为组合式API

//引入配置文件
import { createI18n } from "vue-i18n"; //引入vue-1i8n
import en from './en.json';   // 英文
import zhHans from './zh-Hans.json';  // 中文

//创建配置
const i18n = createI18n({    
	locale: uni.getLocale(),
	messages: {
		legacy: false,
		en,
		'zh-hans':zhHans
		
	},
})

//导出配置
export default i18n

en.json文件配置，此文件是你自己需要添加英文字段的地方

{
	"lang.en":"EngLish",
	"lang.zh-hans":"简体中文",
	"settings":"Settings",
	"agreement":"User privacy Agreement",
	"user_management":"User management",
	"role_management":"Role management",
	"menu_management":"Menu management",
	"post_management":"Position management",
	"org_management":"Organization management",
	"add_user":"Add a user",
	"about":"About",
	"clear_cache":"Clear cache",
	"switch_language":"Switch language",
	"log_out":"Log out"
}

zh-Hans.json文件配置，此文件是你自己需要添加中文字段的地方

{
	"lang.en":"EngLish",
	"lang.zh-hans":"简体中文",
	"settings":"设置",
	"agreement":"用户隐私协议",
	"user_management":"用户管理",
	"role_management":"角色管理",
	"menu_management":"菜单管理",
	"post_management":"岗位管理",
	"org_management":"组织管理",
	"add_user":"新增用户",
	"about":"关于",
	"clear_cache":"清理缓存",
	"switch_language":"切换语言",
	"log_out":"退出登录"
}

二、全局引入

 src目录下找到main.js，导入国际化配置，并注册

import { createSSRApp } from "vue";
import App from "./App.vue";
import *  as  Pinia from 'pinia';
import uviewPlus from 'uview-plus';
import { initRequest } from './request/index';
import i18n from '@/locale'  //第一步  引入locale文件夹下的index

export function createApp() {
	const app = createSSRApp(App);
	initRequest(app);
	app.use(uviewPlus)
	app.use(Pinia.createPinia());
	app.use(i18n);   //第二步  注册i18n
	return {
		Pinia,
		app,
	};
}

三、页面使用

         直接用$t('')就可以了

<template>
	<view class="setting-lay-out">
		<view class="ui-cell">
			<up-cell-group :border='false'>
				<up-cell :title="$t('about')" isLink></up-cell>
				<up-cell :title="$t('clear_cache')" isLink></up-cell>
				<up-cell :title="$t('switch_language')" isLink :border="false"></up-cell>
			</up-cell-group>
		</view>
		<view class="ui-btn">
			<up-button :text="$t('log_out')" size='large' @click="outLogin"></up-button>
		</view>
	</view>
</template>

四、page.json中使用

        用% %包裹需要使用的语句即可

        

五、效果展示