This is the 19th day of my participation in the Genwen Challenge

1. Introduction

There are countless front-end frameworks, and several popular frameworks have internationalization plug-in tools to match, as follows:

vue + vue-i18n

angular + angular-translate

react + react-intl

jquery + jquery.i18n.property
Copy the code

2. Internationalization implementation

2.1 Installing plug-ins

First, install vuE-I18N dependencies in the project. Here, use NPM to install. If you do not have scientific Internet access, use CNPM to install.

npm install vue-i18n --save-dev
Copy the code

2.2 introduction of vue – i18n

Introducing I18n into vue instances, implementing the calling API and template syntax in projects, and now introducing VUE-i18n in main.js.

import VueI18n from 'vue-i18n'        / / introduction of the vue - i18n

Vue.use(VueI18n);    // Mount through plug-ins

/*--------- the basic usage is -----------*/
const i18n = new VueI18n({
 locale: 'CN'.// The language identifier
 messages : {
   en: {
     message: {
       hello: 'hello world'}},cn: {
     message: {
       hello: 'Hello world'}}}})/*--------- uses the language package -----------*/
const i18n = new VueI18n({
   locale: 'zh'.// The language identifier
   $i18n.locale locale locale locale locale locale locale locale locale locale locale locale locale locale locale
   messages: {
     'zh': require('./assets/lang/zh'),   // Chinese language package
     'en': require('./assets/lang/en')    // English language package}})/* eslint-disable no-new */
new Vue({
 el: '#app',
 i18n,        // Mount to the instance in this location, not comonents
 template: '<App/>'.components: {
   App
 }
});
Copy the code

The above code formally introduces VUE-i18n into the VUE project, creating an i18N instance object for global invocation. We use this.$i18n.locale to switch languages.

2.3 Creating a Language Package

Create two new JS files (or josn files) as the language package

The code in the en.js language package is:

module.exports = {
  message: {
    login: 'Login'.Username: 'Username'.Password: 'Password'.Captcha: 'Captcha'.Language: 'Language'.zh: 'Chinese'.en: 'English'
  },
  nav: {Home:'home'.About:'about'}}Copy the code

The code in the zh.js language package is:

module.exports = {
  message: {
    login: 'login'.Username: 'Username'.Password: 'password'.Captcha: 'Captcha'.Language: 'language'.zh: 'Chinese'.en: 'English'
  },
  nav: {Home:'home'.About:'about'}}Copy the code

You just control the value of the locale in the form of a trigger event that calls the corresponding language package.

2.4 VUE – I18N Template syntax for data rendering

// 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

2.5 components

The value of the component that triggers the event to switch locale to implement the language switch

The installation uses element-UI

<template>
  <div class="about">
    <div class="lang">
      <el-radio-group v-model="language" size="mini">
          <el-radio v-for="(item,index) in lang" :label="item.value" border :key="index">
            {{item.label}}
          </el-radio>
      </el-radio-group>
    </div>
    <div>{{$t('message.zh')}}</div>
    <input :placeholder="$t('message.Username')"/>
  </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.lang: [{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.lang, 0, {label: this.$t('message.zh'), value: 0});
        Vue.set(this.lang, 1, {label: this.$t('message.en'), value: 1}})}},</script>
Copy the code

Note: Due to JavaScript limitations, Vue cannot detect the currently changing array. It only renders once. If the data does not update the view, the component will not be updated.

2.6 Compatibility between Element UI component library and VUE-I18N

Because the project uses the Element UI component library, some of its built-in text needs to be internationalized, but Element UI is internationalized. By default, Element UI is only compatible with vuE-I18n in version 5.x, and vuE-I18n is now compatible with version 8.x, as detailed in the “Internationalization” section of the Official Element UI documentation.

Post the manual Settings below, update main.js, please note the changes:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueI18n from 'vue-i18n'  / / introduction of the vue - i18n
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import enLocale from 'element-ui/lib/locale/lang/en'        // Introduce Element UI's English package
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'     // Introduce Element UI's Chinese package

Vue.config.productionTip = false

Vue.use(VueI18n);    // Mount through plug-ins
Vue.use(ElementUI,{
  i18n: (key, value) = > i18n.t(key, value)
});

/*--------- uses the language package -----------*/
const i18n = new VueI18n({
  locale: 'zh'.// The language identifier
  $i18n.locale locale locale locale locale locale locale locale locale locale locale locale locale locale locale
  messages: {
    'zh': Object.assign(require('./assets/lang/zh'),zhLocale),   // Chinese language package
    'en': Object.assign(require('./assets/lang/en'),enLocale)    // English language package}})new Vue({
  router,
  store,
  i18n,   // Mount to the instance in this location, not comonents
  render: h= > h(App)
}).$mount('#app')

Copy the code

2.6.1 Syntax problems of route and Breadcrumb navigation internationalization

Router.js (routing configuration file) :

const routes = [
  {
    path: '/'.name: 'nav.Home'.component: Home
  },
  {
    path: '/about'.name: 'nav.About'.// Directly click on the corresponding text in the language package
    component: () = > import('.. /views/About.vue')}]Copy the code

Breadcrumb.vue

    <div id="Breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('nav.Home')}}</el-breadcrumb-item>
          <! {{$t(item.name)}} -->
        <el-breadcrumb-item v-for="(item,i) in $route.matched" :to="{ path: item.path}" :key="i">
          {{$t(item.name)}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
Copy the code