uniapp实现多语言

uniapp实现多语言

1. 使用uni-i18n插件

uni-i18n是一个专门为UniApp设计的国际化插件，它可以帮助你轻松地实现多语言支持。

1.安装插件

使用HBuilderX的插件市场搜索uni-i18n并安装，或者通过npm安装：

npm install @dcloudio/uni-i18n

2.配置语言文件

在src/locale目录下创建语言文件，例如en.js和zh-Hant.js：

// src/locale/en.js
export default {
greeting: 'Hello'
};
// src/locale/zh-Hant.js
export default {
greeting: '你好'
};

3.初始化国际化插件

在main.js或main.ts中初始化插件：

import Vue from 'vue'
import VueI18n from '@dcloudio/uni-i18n'
import en from './locale/en'
import zhHant from './locale/zh-Hant'
Vue.use(VueI18n)
const messages = {
en,
'zh-Hant': zhHant, // 注意这里的语言代码要和实际使用的代码一致，例如在项目中设置为中文时，应为'zh-Hans'而不是'zh-Hant'，除非你使用的是繁体中文。
}
const i18n = new VueI18n({
locale: 'en', // 设置默认语言
messages, // 设置资源
})
const app = new Vue({
...App,
i18n, // 将i18n实例挂载到Vue上
})
app.$mount()

4.使用国际化

在组件中使用：

<template>
<view>{{ $t('greeting') }}</view>
</template>

总结：

请确保你的项目环境和版本兼容。动态切换语言的功能可以根据需要轻松实现。