国际化实现原理与常用方案

什么是国际化

国际化（Internationalization），通常缩写为i18n，它是指设计和开发软件、网站等内容时，使它们能够无需工程上的调整就能适应不同的语言和地区的过程。

国际化实现原理

我们有一个变量 msg ，但是这个 msg 有且只能有两个值：

1. hello world
2. 你好世界

要求：根据需要切换 msg 的值

这样的一个需求就是 国际化 的需求

通过上述需求来实现代码

<script>
  // 1. 定义 msg 值的数据源
  const messages = {
    en: {
      msg: 'hello world'
    },
    zh: {
      msg: '你好世界'
    }
  }
  // 2. 定义切换变量
  let locale = 'en'
  // 3. 定义赋值函数
  function t(key) {
    return messages[locale][key]
  }
  // 4. 为 msg 赋值 
  let msg = t('msg')
  console.log(msg);
  // 修改 locale， 重新执行 t 方法，获取不同语言环境下的值

</script>

由此可见，我们通过一个变量控制语言环境。所有环境下的数据都是提前定义好的，

在通过一个方法来获取当前语言环境 指定的值。我们就在不同的环境下展示规定的值。

就实现了国际化的需求了。

基于 vue-i18n V9  的国际化实现方案分析

在 vue 的项目中，我们不需要手写这么复杂的一些基础代码，可以直接使用 vue-i18n 进行实现（注意：vue3 下需要使用 V 9.x 的 i18n）

vue-i18n 的使用可以分为四个部分：

1. 创建 messages 数据源
2. 创建 locale 语言变量
3. 初始化 i18n 实例
4. 注册 i18n 实例

   import { createApp } from 'vue';
   import { createI18n } from 'vue-i18n';
   import App from './App.vue';
   
   const i18n = createI18n({
     // 使用 Composition API 模式，则需要将其设置为false
     legacy: false,
     // 全局注入 $t 函数
     globalInjection: true,
     locale: 'zh',
     fallbackLocale: 'en',
     messages: {
       en: {
         mesasge: {
           hello: 'hello world',
         },
       },
       zh: {
         message: {
           hello: '你好 世界',
         },
       },
     },
   });
   
   const app = createApp(App);
   app.use(i18n);
   app.mount('#app');

   在代码中使用

   <template>
     <h1>{{ $t('message.hello') }}</h1>
   </template>
   

   结果：

修改 locale 的值，即可改变展示的内容 。到此已经实现了i18n 的最基础用法。

当然i18n 还有很多用法比如：消息格式语法、多元化、日期时间格式、数字格式等。

可以去官方文档查看。