国际化 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# 国际化

uView Next 新增了国际化支持，基于 Vue I18n 实现，默认使用中文语言，内置8种语言切换

# 基础用法

# 1. 安装和配置

在 main.js 中引入并配置国际化：

import App from './App';
import zhCN from './locale/zh-CN.json';
import enUS from './locale/en-US.json';
import uView, { VueI18n, createI18n } from '@/uni_modules/uview-next';

// #ifndef VUE3
Vue.use(VueI18n)  //vue3不需要
// #endif

const i18n = createI18n({
	locale: 'zh-CN', // 默认显示语言
	fallbackLocale: 'en-US', // 回退语言
	messages: {
		'zh-CN': zhCN,
		'en-US': enUS
	}
})

// #ifndef VUE3
import Vue from 'vue';
Vue.config.productionTip = false;

Vue.use(uView);

App.mpType = 'app';
const app = new Vue({
	i18n,
	...App
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
	const app = createSSRApp(App);

	app.use(uView);
	app.use(i18n);
	
	return {
		app
	};
}
// #endif
✅ Copy success!

# 2. 语言包配置

创建语言包文件，例如 locale/zh-CN.json：

{
	"index.desc": "uView Next，基于2.0.38支持vue2和vue3，全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。"
}
✅ Copy success!

locale/en-US.json：

{
	"index.desc": "uView Next， Based on 2.0.38 support for Vue2 and Vue3, fully compatible with nvue's uni app ecosystem framework, comprehensive components and convenient tools will make you feel at ease."
}
✅ Copy success!

# 3. 在页面模板和js中使用

页面模板中使用 $t() 获取，并传递国际化json文件中定义的key，js中使用 this.$t('')

<template>
  <view class="container">
    <view class="desc">{{$t('index.desc')}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>
✅ Copy success!

# 4. 切换语言

# Vue3 用法

<script>
const changeLanguage = () => {
    uni.$u.setLocale('en-US')
}
</script>
✅ Copy success!

# 配置说明

# createI18n 参数

参数	类型	默认值	说明
locale	String	'zh-CN'	当前语言
fallbackLocale	String	'en-US'	回退语言，当当前语言包中找不到对应翻译时使用
messages	Object	{}	语言包对象

# 组件支持的语言

zh-CN: 简体中文
zh-HK: 繁体中文（香港）
en-US: 英文
ja-JP: 日文
ko-KR: 韩文
fr-FR: 法文
de-DE: 德文
es-ES: 西班牙文
ru-RU: 俄文
ar-SA: 阿拉伯文

← 安装配置 →