- Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
An overview of the
Vue-i18n is an internationalized library for VUE projects that makes it easy to support multiple languages in a single project. It is very convenient to add VUE-i18n to an existing project, and this article assumes that you already have your own VUE project.
reference
Download dependency packages:npm install vue-i18n
Creating a language pack
Here we simulate the creation of both Chinese and English language package zh.js en.js
//ch.js
module.exports = {
message: {
Username: 'Username'.Language: 'language'.zh: 'Chinese'.en: 'English'}},Copy the code
//en.js
module.exports = {
message: {
Username: 'Username'.Language: 'Language'.zh: 'Chinese'.en: 'English'}},Copy the code
Introduced in main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// Introduce Element UI's English package
import enLocale from 'element-ui/lib/locale/lang/en'
// Introduce Element UI's Chinese package
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const i18n = new VueI18n({
locale: 'zh'.// The default language identifier
messages: {
'zh': Object.assign(require('./assets/lang/ch'),zhLocale), // Chinese language package
'en': Object.assign(require('./assets/lang/en'),enLocale),// English language package}})new Vue({
router,
i18n, //** must be mounted here **
render: h= > h(App)
}).$mount('#app')
Copy the code
use
Base syntax, similar to vue base syntax, wraps variables with $t(“) on top of base syntax
// 1. Use the vue component template <div>{{$t('message.zh')}}</div> // 2. Use of vUE component template data binding <input :placeholder="$t('message.zh')"/> // 3. Use of assignment in vue component data data:{ msg:this.$t('message.zh'); } Copy the code
The instance
<template>
<div class="about">
<div class="lang">
<el-radio-group v-model="language" size="mini">
<el-radio v-for="(item,index) in options" :label="item.value" :key="index">
{{item.label}}
</el-radio>
</el-radio-group>
</div>
<div>{{$t('message.zh')}}</div>
<el-input :placeholder="$t('message.Username')"></el-input>
</div>
</template>
<script>
import Vue from 'vue'
export default {
mounted() {
this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1 // When data is loaded, determine which language it belongs to and assign a value to its radio button
},
data() {
return {
language: 0.options: [{label: this.$t('message.zh'), // a form of template syntax
value: 0
}, {
label: this.$t('message.en'),
value: 1}}},watch: {
language: function (val) { // Listen for radio buttons to switch languages
val === 0 ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
Vue.set(this.options, 0, {label: this.$t('message.zh'), value: 0});
Vue.set(this.options, 1, {label: this.$t('message.en'), value: 1}})}},</script>
Copy the code
The example page looks like this: