Vue项目中使用i18n国际化

在vue项目中，一个简单的引入国际化最佳实践案例。

1. 安装依赖 npm install vue-i18n
2. 新建一个locales文件夹存放国际化配置信息

// locales index.js
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'

    import en from './en.json'
    import zh from './zh-CN.json'

    Vue.use(VueI18n)

    const messages = {
      en,
      zh
    }

    export default new VueI18n({
      locale: 'en',
      messages,
    })

// locales en.json
{
    "menusFirst": {
      "Product": "Commodity",
      "Goods": "Order",
      "Data": "Data",
      "Logistics": "Logistics",
      "Purchase": "Purchase",
      "Depot": "Depot",
      "Finance": "Finance",
      "Member": "Member",
      "System": "System",
      "Auth": "Auth",
      "Nav": "Navigation"
    }
}

// locales zh-CN.json
{
    "menusFirst": {
      "Product": "商品",
      "Goods": "订单",
      "Data": "数据",
      "Logistics": "物流",
      "Purchase": "采购",
      "Depot": "云仓",
      "Finance": "财务",
      "Member": "会员",
      "System": "系统",
      "Auth": "认证",
      "Nav": "导航"
    }
}

3. 在main.js中引入配置好的vue-18n

import i18n from '@/locales'

new Vue({
    // 省略...
    i18n
})

4. 在项目中使用$t()替换文本内容

<p>
    $t('menusFirst.Product')
</p>

5. 改变$i18n.locale值可以控制切换语言

function handleLocaleChange(msg) {
    this.$18n.locale = msg
}
handleLocaleChange('en') // 文本会改编为英文

6. 注意：$te()可以判断值是否存在；vsCode中建议安装 i18n Ally 插件配合使用更佳，可以自动翻译语言文件。