uni-app - - - - -vue3使用i18n配置国际化语言
uni-app - - - - -使用i18n配置国际化语言
- 1. 安装vue-i18n
- 2. 配置文件
- 2.1 创建如下文件
- 2.2 文件配置
- 2.3 main文件导入i18n
- 3. 页面内使用
- 3.1 template内直接使用
- 3.2 变量接收使用
1. 安装vue-i18n
npm install vue-i18n --save
2. 配置文件
2.1 创建如下文件
- locales文件夹里的js文件，对应各个语言的配置
2.2 文件配置
en-US.js
// 英文配置文件
export default {str: 'string',obj: {key1: 'value1',key2: 'value2'},arr: ['arr1', 'arr2']
}
zh-CN.js
// 中文配置文件
export default {str: '字符串',obj: {key1: '字段1',key2: '字段2'},arr: ['元素1', '元素2']
}
index.js
import {createI18n
} from "vue-i18n";
import zhCN from "./locales/zh-CN";
import enUS from "./locales/en-US";const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo);//uni.showModal({
// title: '宿主语言',
// content: systemInfo.hostLanguage
//})let _lan = systemInfo.hostLanguage || 'zh-CN'; // 获取本地存储 || 根据浏览器语言设置console.log('当前语言为:', _lan);const i18n = createI18n({fallbackLocale: 'zh-CN',legacy: false, // 使用Composition API，这里必须设置为falselocale: _lan, // 默认使用语言globalInjection: true, // 全局注册$t方法messages: {"zh-CN": zhCN,en: enUS,},
});export default i18n;
2.3 main文件导入i18n
import i18n from "./language";...app.use(i18n)
3. 页面内使用
3.1 template内直接使用
注意：对象、数据 使用$tm
<view>字符串： {{ $t('str') }} </view>
<view>字符串： {{ $tm('obj.key1') }} </view>
<view>字符串： {{ $tm('arr')[0] }} </view>
3.2 变量接收使用
<view>字符串： {{ pageStr }} </view>
<view>字符串： {{ pageObj }} </view>
<view>字符串： {{ pageArr }} </view>
import i18n from "/language";const pageStr = ref(computed(() => i18n.global.t("str")))
const pageObj = ref(computed(() => i18n.global.tm("obj")))
const pageArr = ref(computed(() => i18n.global.tm("arr")))return {pageStr,pageObj,pageArr
}