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 使用 createI18nconst { 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>
