i18n internationalization use

Look at the renderings:

first step:

Vue-i18n first install the dependencies in your own projects. As used herein, NPM installation (CNPM also be used for mounting), installation is as follows:

npm install vue-i18n --save-dev

Step two:

The introduction of i18n vue example, the implementation calls API and syntax template in the project. Now introducing the vue-i18n in main.js. as follows:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'  //引入vue-i18n

Vue.use(ElementUI);
Vue.use(VueI18n);    //通过插件的形式挂载
Vue.config.productionTip = false;

/*---------使用语言包-----------*/
const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'),   // 中文语言包
    'en-US': require('./common/lang/en')    // 英文语言包
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,        //挂载到实例，一定得在这个位置，而不是comonents中
  router,
  components: { App },
  template: '<App/>'
})

The above code will be formally introduced vue vue-i18n project, create an instance of an object i18n, convenient global call. We this.$i18n.locale switched to the language.

third step:

Next we need to create two js files (or josn file) as the language pack.

Wherein the code for the language packs en.js:

module.exports = {
  message: {
    login: 'Login',
    Username: 'Username',
    Password: 'Password',
    Captcha: 'Captcha',
    Language: 'Language',
    zh: 'Chinese',
    en: 'English'
  }
}

Wherein the code for the language packs zh.js:

module.exports = {
  message: {
    login: '登录',
    Username: '用户名',
    Password: '密码',
    Captcha: '验证码',
    Language: '语言',
    zh: '中文',
    en: '英文'
  }
}

Finally, we just need to pass in the form of a trigger event to control the value of the locale, to call the corresponding language packs can be achieved international friends.

the fourth step:

Components trigger event switching value locale, enabling switching languages. template code is as follows:

<div class="lang">
     <div class="change-lang" @click="changeLangEvent()">{{changeLang}}</div>
     <ul>
        <li>{{$t('message.login')}}</li>
        <li>{{$t('message.Username')}}</li>
        <li>{{$t('message.Password')}}</li>
        <li>{{$t('message.Captcha')}}</li>
        <li>{{$t('message.Language')}}</li>
        <li>{{$t('message.zh')}}</li>
        <li>{{$t('message.en')}}</li>
      </ul>
</div>

scrpit code is as follows:

data () {
   return {
       lang: 'zh-CN',
       changeLang: '切换English',
   }
},
methods: {
       changeLangEvent() {
           if (this.changeLang == '切换English') {
               this.changeLang = '切换中文';
           } else {
               this.changeLang = '切换English';
           }
           if (this.lang === 'zh-CN') {
               this.lang = 'en-US';
               this.$i18n.locale = this.lang;
           } else {
               this.lang = 'zh-CN';
               this.$i18n.locale = this.lang;
           }
       },
},

Note: Due to limitations of JavaScript, Vue can not detect changes in the current array, rendering only once, if the data is not updated view is not updated components, switch languages if you need to update some data can be switched within the multi-language component.

the fifth step:

vue-i18n data rendered template syntax, grammar template temporarily divided into three types:

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}

Additional: Element UI component library with vue-i18n compatibility issues

Because the project uses Element UI component library, it built some text inside it also needed international, fortunately Element UI is there to support internationalization. But the Element UI default is only compatible with version 5.x vue-i18n, and now vue-i18n version has come to 7.x, Element UI official document " internationalization " section of this specific description. The manual setting out the content posted below:

import Vue from 'vue'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'        //引入Element UI的英文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'     //引入Element UI的中文包

Vue.use(VueI18n);
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
}); //兼容i18n 7.x版本设置

const i18n = new VueI18n({
  locale: 'zh', // 语言标识
  messages: {
    zh: Object.assign(require('@/components/common/lang/zh'), zhLocale),  //这里需要注意一下，是如何导入多个语言包的
    en: Object.assign(require('@/components/common/lang/en'), enLocale),
  }
});

Reference article: https://www.jianshu.com/p/4b96919e3622

i18n internationalization use

Guess you like