使用vue-i18n进行项目国际化

雨点打透心脏的1/2处 2022-05-13 01:06 365阅读 0赞

## vue-i18n方案文档 ##

### 简介 ###

#### 安装 ####

npm i -S vue-i18n

#### 配置 ####

cd project-path/src/***
    mkdir i18n
    cd i18n
    touch index.js
    mkdir lang
    touch zh-CN.js en-US.js

> 1.zh-CN.js和en-US.js为具体语言包；
> 
> 2.index.js负责实例化VueI18n ，加载应用语言包，export出i18n；
> 
> 3.项目入口文件在实例化Vue时引入i18n：`const app = new Vue({router, i18n, ...})`。

#### 语言切换 ####

// ./i18n/index.js
    // 按需加载(此实现需要lang与语言包js文件同名，如'zh-CN'、'us-EN'等)
    export function loadLanguageAsync (lang) { 
      if (i18n.locale !== lang) {
        if (!loadedLanguages.includes(lang)) {
          return import(`./lang/${lang}`).then(msgs => {
            i18n.setLocaleMessage(lang, msgs.default[lang]);
            i18n.setDateTimeFormat(lang, msgs.default[lang]);
            i18n.setNumberFormat(lang, msgs.default[lang]);
            loadedLanguages.push(lang);
            return setI18nLanguage(lang);
          });
        };
        return Promise.resolve(setI18nLanguage(lang));
      }
      return Promise.resolve(lang);
    }
    // 设置语言包
    function setI18nLanguage (lang) { 
      i18n.locale = lang;
      return lang
    }
    
    // ***.vue
    import { loadLanguageAsync } from '../i18n'
    export default {
        methods: {
            chooseLanguage(lang) {
                localStorage.setItem('lang', lang);
                loadLanguageAsync(lang)
          }
        }
    }

#### 使用 ####

// ./i18n/lang/zh-CN.js
    const cn = {
        staff: {
            meta: {
                name: '姓名'
            }
        }
    }
    export default {
        'zh-CN': cn
    }
    // ./i18n/lang/en-US.js
    const en = {
        staff: {
            meta: {
                name: 'Name'
            }
        }
    }
    export default {
        'en-US': en
    }
    
    // ./i18n/index.js
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import langs from './lang/cn'
    //默认加载中文
    export const i18n = new VueI18n({
      locale: 'cn',
      messages: langs,
      numberFormats: langs,
      dateTimeFormats: langs
    })
    
    // main.js or index.js (项目入口文件)
    import { i18n } from '$client/i18n';
    new Vue({
      router,
      i18n,
      render: h => h(App)
    }).$mount('#app');
    
    // ***.vue
    <span>{
       { $t('staff.meta.name') }}</span>

#### 常用方法 ####

>     $t(path, locale, option) // text 文本替换，locale可单独设置语言，option可传参数替换模板
>     $tc(path, choice, locale, option) // text+choice 比$t多一个choice，可以选择模板内容（模板内容间用 | 分隔，如 香蕉|苹果|梨，最多只能使用三个选项，下标从0开始，当选项为2个时下标从1开始~~）
>     $te(path) // text+exist 判断当前语言包中path是否存在
>     $d(number|Date, path, locale) // date 时间格式化
>     $n(number, path, locale) // number 数字格式化（货币等）
>     
>     // 更多细节参考官方文档：https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

### 问题记录 ###

#### 语言包规范 ####

/* * 语言包主要分为三部分： * 1.constant：项目内置的常量等； * 2.customized：为了UI展示自定义内容 * 3.如element-ui内置的zh-CN等额外的语言包 * export时将各部分进行合并，隐藏细节以便使用 */
    
    // 以zh-CN.js为例
    import merge from 'deepmerge'
    import cnLocale from 'element-ui/lib/locale/lang/zh-CN';
    
    const constant = {
        staff: {
            gender: {
              0: '保密',
              1: '男',
              2: '女'
            },
            // ...
        },
        account: {
            // ...
        },
        // ...
    }
    const customized = {
        staff: {
            state: {
              all: '全部'
            },
            meta: {
              name: '姓名',
              sector: '所在分支',
              phone: '手机号',
              state: '状态',
              operation: '操作'
            },
            // ...
        },
        account: {
            // ...
        },
        // ...
    }
    export default {
      'zh-CN': merge.all([constant, customized, cnLocale])
    };

#### 项目集成i18n工作量 ####

1.  涉及文案需要变化展示的代码都需要改，人工工程量较大。
2.  语言包中key和value需要产品经理进行更合理的语义翻译。

#### 待解决问题 ####

1.  内部封装库的（假设名字为comman-components）国际化方案如何实施？
    
     *  方案一：制作comman-components专用的语言包，业务层引入biz-packages时需要在对应语言包中导入comman-components的语言包，合并后导出。
        
        > 举例：如在comman-components中创建lang文件夹，里面做了一个中文包为cn.js，业务层中的zh-CN.js就可以`import bizCnLocale from './comman-components/src/lang/cn'`，在最后`export default {'zh-CN': merge.all([constant, customized, bizCnLocale ])}`，这样comman-components的语言包就可以生效了。
        > 
        > **业务层必须使用i18n，否则显示会出问题**
     *  方案二：借鉴element-ui，制作comman-components专用的locale、lang、mixins，对外暴露接口。
        
        > element-ui有完整的流程可供参考，此方案比较安全，业务层没有使用i18n时可以有默认语言，但逻辑复杂，工程量较大。
        > 
        > **业务层不强制使用i18n，但逻辑较为复杂**
     *  方案三：在业务层把语言包做成一大个，其他业务要用的时候自己加上（类似方案一，但没有独立为文件，语言需要去公共空间拷贝）。
        
        > 临时方案，目前可用，但非长久之计
        > 
        > **业务层必须使用i18n，否则显示会出问题**
2.  服务端如何更好的配合国际化工作？
3.  如果整个项目的同语言的语言包都放在一个文件中，文件体积是否过大且无必要？