How to use multilingual support in Vue projects

Multilingual support

International processing

The multilingual support in the Vue project uses vue-i18n

reference resources: https://kazupon.github.io/vue-i18n/zh/started.html

target

Realize the Chinese and English switching function of elementUI and feel the effect of Chinese switching

Install internationalized packages

npm i vue-i18n@8.22.2

Please note the version number. vue-i18n now has a new version. The corresponding api is somewhat incompatible. Please use 8.22.2!

ElementUI multilingual configuration

Introduce the element language pack file src/lang/index.js

// Configure multilingual support
import Vue from 'vue' // Introducing Vue
import VueI18n from 'vue-i18n' // Introduce international plug-in package
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // Are you hungry
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // Are you hungry
Vue.use(VueI18n) // Global registration internationalization package

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

export default i18n

Install the plug-in of i18n in main.js

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

Custom content multilingual configuration

background

In the previous summary, we have made the elementui component library support multilingual configuration through configuration. How can we implement multilingualism for the customized content: that is, the part that does not use elementui?

target

Import custom Chinese and English configuration

Introduce custom multilingual configuration

Note in src: the user-defined language configuration file is in the project resource / language package

|- src
			|-lang
						|-index.js
						|-en.js # Copied from resource package
						|-zh.js # Copied from resource package

to configure

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'
// Import custom Chinese package
+ import customZH from './zh' 
// Import custom English package
+ import customEN from './en' 

Vue.use(VueI18n)

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

2. User defined content multilingual configuration

background

In the previous summary, we have made the elementui component library support multilingual configuration through configuration. How can we implement multilingualism for the customized content: that is, the part that does not use elementui?

target

Import custom Chinese and English configuration

Introduce custom multilingual configuration

Note in src: the user-defined language configuration file is in the project resource / language package

|- src
			|-lang
						|-index.js
						|-en.js # Copied from resource package
						|-zh.js # Copied from resource package

to configure

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'
// Import custom Chinese package
+ import customZH from './zh' 
// Import custom English package
+ import customEN from './en' 

Vue.use(VueI18n)

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

Example: switch between Chinese and English title s

Objective: to switch the name of the company between Chinese and English

  1. Prepare two sets of translation copy

    Set companyName in en.js and zh. Respectively


2 modify template rendering

use t ( ′ genus nature name ′ ) come living become mark topic . this in of t('attribute name ') to generate the title. there t('attribute name ') to generate the title. t here is the function of automatically mounting on the vue instance after the introduction of i18n.

<div class="app-breadcrumb">
  {{ $t('navbar.companyName') }}
  <span class="breadBtn">Experience version</span>
</div>

Manually switch the locale between en and zh to see the effect

src/lang/index.js

export default new VueI18n({
  // Try switching here en
  locale: 'zh'
  ...
})

Understand the switching principle between Chinese and English

After we introduced the VueI18n language plug-in, each component instance has a $t method, which can help us with language conversion. We can use the passed in key to find the text corresponding to the current key according to the current language type. The basic principle is as follows:

3. Realize dynamic switching between Chinese and English - package components

Background: Although we have implemented the core logic of Chinese English switching, it is dead and cannot be switched dynamically

target

To achieve the following effects, click the Chinese and English buttons to pop up the drop-down box. When we click Chinese and en, we can dynamically switch the current language

thinking

When clicking the drop-down box, assign the currently selected language to this.$i18n.locale attribute

Encapsulating multilingual components

In the location where common components are placed: src/components/Lang/index.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 local i18n plug-ins
      this.$message.success('Switching multiple languages succeeded')
    }
  }
}
</script>

Note: icon class = "language" you need a file named language.svg under src\icons\svg \.

Global registration

Register global components in component/index.js

import Lang from './Lang'
export default {
  // The initialization of plug-ins and the global functions provided by plug-ins can be configured here
  install(Vue) {
    // Global registration of components
    Vue.component('Lang', Lang)
  }
}

Introducing usage components in Navbar components

<!-- Language pack -->
<lang class="right-menu-item" />
<!-- Full screen assembly -->
<screen-full class="right-menu-item" />

4. Multilingual solutions

Package: vue-i18n

In main.js, instantiate the vue object and have a special setting item:

import i18n from '@/lang/index.js' // Once set, it can also be used in other projects
new Vue({
  router,
  store...,
  i18n
})

View code: {{$t('xx.xxxx ')}}

Auto switch: this.$i18n.locale= 'zh'

Tags: Javascript node.js Vue.js

Posted on Wed, 01 Sep 2021 15:04:37 -0400 by joePHP