uni-app - - - - -vue3使用i18n配置国际化语言

uni-app - - - - -使用i18n配置国际化语言

  • [1. 安装vue-i18n](#1. 安装vue-i18n)
  • [2. 配置文件](#2. 配置文件)
    • [2.1 创建如下文件](#2.1 创建如下文件)
    • [2.2 文件配置](#2.2 文件配置)
    • [2.3 main文件导入i18n](#2.3 main文件导入i18n)
  • [3. 页面内使用](#3. 页面内使用)
    • [3.1 template内直接使用](#3.1 template内直接使用)
    • [3.2 变量接收使用](#3.2 变量接收使用)

1. 安装vue-i18n

bash 复制代码
npm install vue-i18n --save

2. 配置文件

2.1 创建如下文件

  • locales文件夹里的js文件,对应各个语言的配置

2.2 文件配置

en-US.js

js 复制代码
// 英文配置文件
export default {
	str: 'string',
	obj: {
		key1: 'value1',
		key2: 'value2'
	},
	arr: ['arr1', 'arr2']
}

zh-CN.js

js 复制代码
// 中文配置文件
export default {
	str: '字符串',
	obj: {
		key1: '字段1',
		key2: '字段2'
	},
	arr: ['元素1', '元素2']
}

index.js

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,这里必须设置为false
	locale: _lan, // 默认使用语言
	globalInjection: true, // 全局注册$t方法
	messages: {
		"zh-CN": zhCN,
		en: enUS,
	},
});

export default i18n;

2.3 main文件导入i18n

html 复制代码
import i18n from "./language";

...

app.use(i18n)

3. 页面内使用

3.1 template内直接使用

注意:对象、数据 使用$tm

html 复制代码
<view>字符串:  {{ $t('str') }} </view>
<view>字符串:  {{ $tm('obj.key1') }} </view>
<view>字符串:  {{ $tm('arr')[0] }} </view>

3.2 变量接收使用

html 复制代码
<view>字符串:  {{ pageStr }} </view>
<view>字符串:  {{ pageObj }} </view>
<view>字符串:  {{ pageArr }} </view>
js 复制代码
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
}
相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
雪芽蓝域zzs3 小时前
uniapp 国密sm2加密
uni-app
Liudef064 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端5 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder6 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句6 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom6 小时前
JavaScript reduce()函数详解
javascript
小飞悟6 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试