vue-i18n国际化插件使用

本文在Vue框架选型的基础上，主要采用vue-i18n插件实现国际化前端工程。为了全方面的覆盖前端工程国际化，我们在实例化Vue之前，就应该做好国际化所需依赖及配置文件的工作，从而挂载到实例上以便在全局进行国际化语言映射。

---

配置及挂载

Vue前端工程 main.js 中，引入插件及配置文件

// 引入 i18n插件
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)

// 引入 项目国际化语言配置文件
import localeCn from '@/common/locales/zh_CN';
import localeEn from '@/common/locales/en_US';

项目国际化语言配置文件举例：

localeCn中文配置文件：

export default {
	“test”: “测试”
}

localeEn英文配置文件：

export default {
	“test”: “test”
}

初始化i18n组件并设置HUI语言配置：

// 设置默认语言类型 引入配置文件
const langType = 'zh' // 'en' 'zh'
const messages = {
	zh: {
		...localeCn,
		...zhCN
	},
	en: {
		...localeEn,
		...en
		}
}

// 初始化i18n插件并进行配置
const i18n = new VueI18n({
    locale: langType, // set locale
    messages // set locale messages
});

实例化Vue中将i18n挂载到实例上

window.vue = new Vue({
    router,
    i18n,
    store,
    render: h => h(App),
    created () {
    },
    methods: {
    },
    mounted () {
        
    }
}).$mount('#app');

---

不同模板文件中的使用

Template模板：

<span>{{$t("test") || “测试”}}</span>

可直接指向this：

data () {
    return {
        radio: this.$t('test) || '测试'
	}
}

无法直接指向this，即从全局获取，例如Props中，组件全局变量中：

props: {
    imageName: {
      type: String,
      default: window.vue.$t("test") || '测试'
}

const tabs = [
    {
        label: window.vue.$t('test') || '测试'
    }
]

Tip

以上大致是较为简洁的基于i18n的国际化项目实现流程，如果需要从服务端获取语言类型或者获取语言配置文件，请在实例化Vue之前采用同步化逻辑进行。