关于vue-i18n:vuei18n国际化

这两天手头的工作是给一个商城我的项目增加多语言。这个商城宏大且简单，是用 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

参考

https://segmentfault.com/a/11…