#Uniapp: uniapp国际化适配

uniapp国际化适配

插件安装

npm i vue-i18n@9.1.9

根目录下新建locales文件目录

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zhCN from './lang/zh-CN';
import enUS from './lang/en-US';

// 获取默认语言
export const defaultLang = uni.getStorageSync('language') || 'zh-CN';

// 语言包
const messages = {
  'zh-CN': {
    ...zhCN
  },
  'en-US': {
    ...enUS
  }
};

// 判断 Vue 版本
const isVue3 = Vue.version.startsWith('3');

let i18n;

if (isVue3) {
  // Vue 3 使用 createI18n
  const { createI18n } = VueI18n;
  i18n = createI18n({
    legacy: false, // 使用 Composition API 模式
    locale: defaultLang, // 默认语言
    fallbackLocale: defaultLang, // 回退语言
    messages // 语言包
  });
} else {
  // Vue 2 使用 VueI18n 构造函数
  Vue.use(VueI18n);
  i18n = new VueI18n({
    silentTranslationWarn: true, // 禁止翻译失败警告
    locale: defaultLang, // 默认语言
    fallbackLocale: defaultLang, // 回退语言
    messages // 语言包
  });
}

/**
 * 设置语言编码
 * @param {string} lang 语言编码
 */
export function setI18nLanguage(lang) {
  if (isVue3) {
    i18n.global.locale = lang; // Vue 3 设置语言
  } else {
    i18n.locale = lang; // Vue 2 设置语言
  }
  uni.setStorageSync('language', lang); // 持久化语言设置
}

/**
 * 获取语言值
 * @param {string} key 多语言 key
 * @returns {string} 语言值
 */
export function i18nRender(key) {
  if (isVue3) {
    return i18n.global.t(key); // Vue 3 获取翻译
  } else {
    return i18n.t(key); // Vue 2 获取翻译
  }
}

export default i18n;

main.js引入

import App from './App';
import i18n from './locales';

import navigationBarMixin from './mixin/navigationBarMixin'; // 动态修改导航栏标题

// #ifndef VUE3
import Vue from 'vue';

Vue.mixin(navigationBarMixin);

Vue.config.productionTip = false;
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(i18n)
    return {
        app
    };
}
// #endif

使用示例+语言切换

<template>
	<!-- index.wxml -->
	<view class="container">
		<view class="top-swiper-images">
			<image class="swiper-background-image" src="/static/images/swiper_back_img.png"></image>
			<button style='    position: absolute;top: 0;z-index: 999;display: flex;margin: 32rpx;width: 280rpx;background-color:#E60012' size='mini' type="primary" @click="switchLanguage($i18n.locale)">
				语言切换:{{currentLanguageText}}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		setI18nLanguage,
		defaultLang
	} from '../../locales';
	export default {
		data() {
			return {
			};
		},
		computed: {
			// 将语言代码转换为友好的文本
			currentLanguageText() {
				return this.$i18n.locale === 'zh-CN' ? '中文' : 'English';
			}
		},
    methods: {
			switchLanguage(lang) {
				setI18nLanguage(lang == 'zh-CN' ? 'en-US' : 'zh-CN') // 切换语言
        this.setNavigationBarTitle()
		},
	};
</script>
<style>
	page {
		background-color: #ffffff;
		position: relative;
	}
	.container {}
</style>