shopro商城使用vue-i18n国际化

这两天手头的任务是给一个商城项目添加多语言。这个商城庞大且复杂，是用uniapp+uview ui实现的。商城类的项目要添加多语言，不可避免要做大量的文本替换的工作，这么庞杂的一个项目怎么才能高效的实现多语言国际化是这篇文章主要要写的东西。

引入vue-i18n

vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，首先我们在项目引入这个插件:

cnpm vue-i18n
yarn install

main.js
import VueI18n from 'vue-i18n'

添加lang语言文件夹

新建zh-cn.json 和 ug.json

封装i18n方便我们使用

新建lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale:'zh',
    messages:{
        'zh':require('@/lang/zh-cn.json'),
        'en':require('@/lang/ug.json'),
    }
});

if (uni.getStorageSync('locale')) {
    i18n.locale = uni.getStorageSync('locale')
} else {
    i18n.locale = 'zh-cn'
}

Vue.prototype._i18n = i18n;

export default i18n

vue中使用

  mounted() {
    if (uni.getStorageSync('locale')) {
      this.$i18n.locale = uni.getStorageSync('locale')
    } else {
      this.$i18n.locale = 'zh-cn'
    }
    this.langobj= this.$t('goods');
  },

js中使用

**import i18n from '../../lang/index'
**
export default {
    // 手机号
    mobile: [{
            required: true,
            message: i18n.t('shopro.qingshurushoujihao'),
            trigger: ['change', 'blur']
        },
        {
            validator: (rule, value, callback) => {
                return test.mobile(value);
            },
            message: **i18n.t('shopro.shoujihaomageshibuzhengque'),**
            trigger: ['change', 'blur']
        }
    ],

多语言切换js