• 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: