Multilingual support

Internationalization processing

The multilingual support in the VUE project uses VUE-I18N

Reference: kazupon. Making. IO/vue – i18n/useful…

The target

Achieve elementUI Chinese and English switching function, feel the effect of Chinese switching

Install internationalized packages

NPM I [email protected]Copy the code

Note the version number. Vue-i18n now has a new version, the corresponding API is not compatible, please use this version 8.22.2!

ElementUI multi-language configuration

Introduce the Element language pack filesrc/lang/index.js

// Support multi-language configuration
import Vue from 'vue' / / into the Vue
import VueI18n from 'vue-i18n' // Introduce internationalized plug-in packages
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // Introduce ele. me English packs
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // Introduce ele. me Chinese packs
Vue.use(VueI18n) // Register internationalized packages globally

// Create an instance of the internationalization plug-in
const i18n = new VueI18n({
  // The language type is zh: Chinese. En: English
  locale: 'zh'.// Add the elementUI language package to the plug-in language data
  messages: {
    // Language data in English
    en: {
      ...elementEN
    },
    // Language data in The Chinese environment
    zh: {
      ...elementZH
    }
  }
})
// Configure the elementUI language transformation relationship
locale.i18n((key, value) = > i18n.t(key, value))

export default i18n
Copy the code

Mount the plugin for i18n in main.js

// omit other...
import i18n from '@/lang'
// Add to the root instance configuration item
new Vue({
  el: '#app',
  router,
  store,
  i18n, / / $t, $i18n
  render: h= > h(App)
})
Copy the code

Customize content in multiple languages

Introduce a custom language package in the element language package file SRC /lang/index.js**

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'
// Introduce a custom Chinese package
+ import customZH from './zh' 
// Introduce a custom English package
+ import customEN from './en' 

Vue.use(VueI18n)

// Create an instance of the internationalization plug-in
export default new VueI18n({
  // Specify the language type
  locale: 'zh'.messages: {
    en: {
      ...elementEN, // Introduce ele. me English language pack
+     ...customEN   // Add the custom English package
    },
    zh: {
      ...elementZH, // Introduce ele. me's Chinese language pack
+     ...customZH   // Add the custom Chinese package}}})Copy the code

Encapsulate multilingual components

Placed in the position of the common components: SRC/components/Lang/index. The vue

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff; font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">Chinese</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // set to the local i18N plug-in
      this.$message.success('Switching to multiple languages succeeded')}}}</script>
Copy the code

Component style

Change the title

Added in en

Add in en

Use $t(‘ property name ‘) in the title component to generate the title

<div class="app-breadcrumb">
  {{ $t('navbar.title') }}
  <span class="breadBtn"</span> </div>Copy the code

Manually switch the locale between EN and zh to view the effect

src/lang/index.js

export default new VueI18n({
  // Switch here to try en
  locale: 'zh'. })Copy the code

Global registration

Global component registration in Component /index.js

import Lang from './Lang'
export default {
  // Plugin initialization, plugin to provide you with global functions, can be configured here
  install(Vue) {
    // Register the component globally
    Vue.component('Lang', Lang)
  }
}
Copy the code

Introduce the use component in the Navbar component

<! -- Language pack --><lang class="right-menu-item" />
Copy the code