uniapp 国际化

安装插件

npm install vue-i18n

配置国际化相关文件

1.根目录下创建国际化所需的文件

2. 各文件解释

json文件配置对应的语言

index.js文件负责引入语言文件并进行导出，方便后续main.js调用

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

const locale = uni.getStorageSync('locale') || uni.getLocale() || 'zh-Hans';
console.log('本地化语言', locale);
uni.setStorageSync('locale', locale);

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

// 导出配置
export default i18n;

vue3一定要将legacy设置为false，意思为声明为组合式API

messages对象中的key就是根据uni.getLocale()函数获取到的语言code，value值是语言文件

注意点： uni.getLocale()：获取当前设置的语言

1. 如果当前应用设置过语言，会获取到之前设置的语言
2. 未设置时会返回根据系统语言类型自动选择的语言

main.js文件配置国际化插件

1.引入插件

// 国际化
import i18n from '@/locale';

2.vue使用插件

import { createSSRApp } from 'vue';
export function createApp() {
	const app = createSSRApp(App);
	// 国际化
	app.use(i18n);
	return {
		app,
	};
}

使用方式

访问国际化文本内容

页面使用

直接使用插值语法即可

{{ $t('home.title') }}

js中使用

// 先引入当前页面的实例
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

// 在需要使用的地方调用
// 获取当前语言下所设定的变量名的值 这里选的是home.title（就是你语言文件里的那些变量名）
console.log(proxy.$t('home.title'));

切换语言

// 先引入当前页面的实例
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

// 在需要使用的地方调用
let e = 'en'; // 假定要修改为英文
proxy.$i18n.locale = e; // 更新全局下的语言文件 否则页面引用的文字不会响应更新为对应的选择的语言
uni.setStorageSync('locale', locale);

封装一下国际化常用的方法

这个封装可用可不用

1.在utils文件夹下新建一个i18n.js文件

2.写入下面代码，可以根据需要自行新增或修改

// 切换语言
export const changeLocale = function (proxy, locale) {
	let currentLocale = uni.getStorageSync('locale');
	if (currentLocale === locale) {
		uni.showToast({
			icon: 'none',
			title: proxy.$t('tip'),
		});
		return;
	}
	proxy.$i18n.locale = locale;
	uni.setStorageSync('locale', locale);
};
// 获取国际化的文本
export const getLocaleText = function (proxy, key) {
	return proxy.$t(key);
};

注意： 调用者要传入页面实例proxy

调用方式

// 先引入当前页面的实例
import {getCurrentInstance} from 'vue';
const {proxy} = getCurrentInstance();

// 修改语言
changeLocale(proxy, 'en');
// 获取国际化文本内容
let text = getLocaleText(proxy, 'home.title');
console.log(text);

警告解决方案

如果使用了国际化后出现了这个警告，可以尝试下面的方法解决

在vite.config.js文件中加入代码：

// 国际化
	define: {
		__VUE_I18N_FULL_INSTALL__: true,
		__VUE_I18N_LEGACY_API__: false,
		__INTLIFY_PROD_DEVTOOLS__: false,
	},

提示：这个方法也是网上找的，如果不能解决就自行百度（实在解决不了就不管它，反正警告不影响运行，能跑就行😁）