Vue-i18n is used in the front-end VUE project where multi-language switching is required

Installation Method (NPM)

npm install vue-i18n
Copy the code


Simple to use

1. Instantiate i18n in the main.ts file of vue project

import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = newVueI18n({locale: 'zh'.// The language identifier
  　　messages: {en: {test: {apple: 'apple',}},zh: {test: {apple: 'apple',},},},})Copy the code

2. Mount i18N to vue root instance

new Vue({
  router,
  store,
  i18n,
  render: h= > h(App),
}).$mount('#app')
Copy the code

3. Use this in HTML templates to switch languages by changing i18N’s locale property value

<template>
  <div>
    {{ $t('test.apple') }}
    <div>
      <button @click="switchLang">To switch between English</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo'.methods: {
    switchLang() {
      this.$i18n.locale = 'en'}},}</script>

<style></style>
Copy the code

4. The effect is as follows


However, in practical projects, large sections of translation content are often needed. At this time, we need to classify the translated text into files for easy management

Specific structure can refer to the following figure

Where i18n.js is the code that instantiates i18n

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import zh from './zh/index.js'
import en from './en/index.js'

Vue.use(VueI18n)
let locale = 'zh'
export default function(obj = {}) {
  return new VueI18n({
    locale, // Set the locale
    messages: { en, zh, ... obj },// Set the region information})}Copy the code

Mount to vue instance in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import createI18n from '@/assets/language/i18n.js'

const i18n = createI18n()

new Vue({
  router,
  store,
  i18n,
  render: h= > h(App),
}).$mount('#app')
Copy the code

Js in en and en folders are actually the same. Use webPack API — require.context to automatically import modules

const languagesModule = require.context('./languageModule'.true./\.js$/)
const languages = languagesModule.keys().reduce((modules, modulePath) = > {
  const name = modulePath.replace(/^\.\/(.*)\.js+$/.'$1')
  const value = languagesModule(modulePath)
  modules[name] = value.default
  return modules
}, {})
export default { ...languages }
Copy the code

Files in the EN and zh languageModule folders are in the following format

export default {
  an_apple_a_day: 'An apple a day keeps the doctor away',}Copy the code

Specific use and effect display

code

<template>
  <div>
    {{ $t('test2.an_apple_a_day') }}
    <div>
      <button @click="switchLang">To switch between English</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo'.methods: {
    switchLang() {
      this.$i18n.locale = 'en'}},}</script>
Copy the code

The effect


Vue-i18n variable assignment

Sometimes there are many same statements in different translated texts, at this time we can extract the same ones and process them differently with variables, or sometimes we need to add data returned by the back end to our translation, at this time variables can also be used.


Variable usage

The usage is very simple, here is only a specific example to show

export default {  // No Spaces around variables in parentheses!!
  wait_and_try_again: 'Please wait {seconds} seconds to try again',}Copy the code

Template:

<p>{{ $t('test.wait_and_try_again', { seconds: 6 }) }}<p>   // Please wait 6 seconds and try again
Copy the code