国际化与多语言支持

国际化与多语言支持在uni-app中的实现

uni-app作为跨平台开发框架，国际化与多语言支持是其重要特性之一。开发者可以通过内置机制或第三方库实现应用的多语言切换，满足不同地区用户的需求。

内置i18n方案

uni-app提供了简单的国际化方案，通过messages对象和$t()方法实现文本翻译。在pages.json中配置语言包：

// pages.json
{
  "pages": [
    // 页面配置
  ],
  "uni-app": {
    "i18n": {
      "locale": "zh-Hans",
      "messages": {
        "zh-Hans": {
          "index": {
            "title": "首页",
            "welcome": "欢迎使用uni-app"
          }
        },
        "en": {
          "index": {
            "title": "Home",
            "welcome": "Welcome to uni-app"
          }
        }
      }
    }
  }
}

在页面中使用$t()方法获取翻译：

<template>
  <view>
    <text>{{ $t('index.title') }}</text>
    <button>{{ $t('index.welcome') }}</button>
  </view>
</template>

动态切换语言：

uni.setLocale('en')  // 切换为英文

使用vue-i18n实现更强大的国际化

对于更复杂的国际化需求，可以集成vue-i18n：

1. 安装vue-i18n：

npm install vue-i18n

2. 创建i18n实例：

// src/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    greeting: 'Hello {name}',
    date: {
      long: 'MMMM Do, YYYY'
    }
  },
  zh: {
    greeting: '你好 {name}',
    date: {
      long: 'YYYY年M月D日'
    }
  }
}

const i18n = new VueI18n({
  locale: 'zh', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages
})

export default i18n

3. 在main.js中引入：

import i18n from './i18n'

const app = new Vue({
  i18n,
  ...App
})
app.$mount()

4. 在组件中使用：

<template>
  <view>
    <text>{{ $t('greeting', { name: 'John' }) }}</text>
    <text>{{ $d(new Date(), 'date.long') }}</text>
  </view>
</template>

多语言资源管理

建议将语言资源按模块拆分管理：

src/
  i18n/
    ├── index.js        # 入口文件
    ├── locales/
    │   ├── en-US.js    # 英文资源
    │   ├── zh-CN.js    # 中文资源
    │   └── ja-JP.js    # 日文资源
    └── plugins/        # 插件(如日期格式化)

示例语言资源文件：

// en-US.js
export default {
  common: {
    submit: 'Submit',
    cancel: 'Cancel'
  },
  user: {
    login: 'Login',
    register: 'Register'
  }
}

动态加载语言包

为优化性能，可以实现语言包的按需加载：

// i18n.js
export async function setI18nLanguage(i18n, lang) {
  if (i18n.locale === lang) return lang
  
  if (!i18n.availableLocales.includes(lang)) {
    const messages = await import(`@/i18n/locales/${lang}.js`)
    i18n.setLocaleMessage(lang, messages.default)
  }
  
  i18n.locale = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

处理复数形式和性别

vue-i18n支持复数形式和性别处理：

// 语言资源
{
  en: {
    apple: 'apple | apples',
    friend: 'A friend | {count} friends',
    message: '{gender, select, male {He} female {She} other {They}} will come soon'
  }
}

使用示例：

<template>
  <view>
    <text>{{ $tc('apple', 5) }}</text>  <!-- 输出: apples -->
    <text>{{ $tc('friend', 10, { count: 10 }) }}</text>
    <text>{{ $t('message', { gender: 'female' }) }}</text>
  </view>
</template>

日期和数字格式化

配置日期和数字的本地化格式：

// i18n.js
import dateTimeFormats from './dateTimeFormats'
import numberFormats from './numberFormats'

const i18n = new VueI18n({
  // ...其他配置
  dateTimeFormats,
  numberFormats
})

示例格式配置：

// dateTimeFormats.js
export default {
  'en-US': {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    },
    long: {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long',
      hour: 'numeric',
      minute: 'numeric'
    }
  }
}

// numberFormats.js
export default {
  'en-US': {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  }
}

使用示例：

<template>
  <view>
    <text>{{ $d(new Date(), 'long') }}</text>
    <text>{{ $n(1000, 'currency') }}</text>
  </view>
</template>

RTL语言支持

对于阿拉伯语等从右向左(RTL)的语言，需要特殊处理：

1. 添加RTL语言检测：

const rtlLanguages = ['ar', 'he', 'fa']

export function isRTL(lang) {
  return rtlLanguages.includes(lang)
}

2. 动态切换样式：

<template>
  <view :class="{ 'rtl-direction': isRTL }">
    <!-- 内容 -->
  </view>
</template>

<script>
export default {
  computed: {
    isRTL() {
      return isRTL(this.$i18n.locale)
    }
  }
}
</script>

<style>
.rtl-direction {
  direction: rtl;
  text-align: right;
}
</style>

语言持久化

使用uni-app的存储机制保存用户语言偏好：

// 设置语言
async function setLanguage(lang) {
  await setI18nLanguage(i18n, lang)
  uni.setStorageSync('userLanguage', lang)
}

// 初始化时读取
const savedLang = uni.getStorageSync('userLanguage')
if (savedLang) {
  setLanguage(savedLang)
}

服务端渲染(SSR)考虑

如果使用uni-app的SSR功能，需要确保i18n状态同步：

// 在entry-server.js中
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()
    
    // 从请求中获取语言
    const lang = detectLanguage(context.req)
    setI18nLanguage(app.$i18n, lang)
    
    router.push(context.url)
    // ...其他SSR逻辑
  })
}

测试与调试

为多语言应用编写测试：

// 测试示例
describe('i18n', () => {
  it('should translate messages', () => {
    const wrapper = mount(Component, {
      i18n,
      propsData: { /* ... */ }
    })
    expect(wrapper.text()).toContain('Hello')
  })
  
  it('should switch languages', async () => {
    await setLanguage('zh')
    expect(i18n.locale).toBe('zh')
  })
})

性能优化技巧

1. 按需加载语言包
2. 使用语言包分块
3. 避免在模板中使用复杂表达式
4. 对静态内容使用编译时提取

// webpack配置示例
module.exports = {
  chainWebpack: config => {
    config.plugin('i18n').use(require('@kazupon/vue-i18n-loader'))
  }
}

常见问题解决方案

1. 热更新语言包：

// 开发环境热重载
if (module.hot) {
  module.hot.accept(['@/i18n/locales/en'], () => {
    i18n.setLocaleMessage('en', require('@/i18n/locales/en').default)
  })
}

2. 处理缺失翻译：

const i18n = new VueI18n({
  // ...其他配置
  missing: (locale, key) => {
    console.warn(`Missing translation: ${key} for locale ${locale}`)
    return key
  }
})

3. 动态键名处理：

<template>
  <view>
    <text>{{ $t(`user.${action}`) }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      action: 'login'
    }
  }
}
</script>

高级应用场景

1. 多语言路由：

// 路由配置
const routes = [
  {
    path: '/:lang/home',
    component: Home,
    meta: {
      i18n: {
        title: 'pageTitles.home'
      }
    }
  }
]

// 路由守卫
router.beforeEach((to, from, next) => {
  const lang = to.params.lang || 'en'
  setI18nLanguage(i18n, lang)
  next()
})

2. API响应国际化：

// 请求拦截器
axios.interceptors.request.use(config => {
  config.headers['Accept-Language'] = i18n.locale
  return config
})

3. 第三方服务集成：

// 例如集成Element UI的国际化
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

多语言应用发布策略

1. 应用商店元数据本地化
2. 分语言打包发布
3. 动态语言包更新机制

// 检查语言包更新
async function checkI18nUpdate() {
  const currentVersion = uni.getStorageSync('i18nVersion')
  const { version, url } = await fetchLatestI18nVersion()
  
  if (version !== currentVersion) {
    const newMessages = await fetchI18nResources(url)
    i18n.setLocaleMessage(i18n.locale, newMessages)
    uni.setStorageSync('i18nVersion', version)
  }
}