Tips for using i18n to implement multi-language switching in Vue

With the continuous development of internationalization, more and more websites and applications need to support multi-language switching functions. As a popular front-end framework, Vue provides a plug-in called i18n that can help us achieve multi-language switching. This article will introduce common techniques for using i18n to achieve multi-language switching in Vue.

Step 1: Install the i18n plug-in

First, we need to install the i18n plug-in using npm or yarn. Enter the following command in the command line:

npm install vue-i18n --save

or

yarn add vue-i18n

Step 2: Configure i18n

In the Vue project, we need to introduce i18n in main.js, and do some basic configuration. An example is as follows:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'en-us', // 默认语言为英语
    fallbackLocale: 'zh-cn', // 如果当前语言没有在 locale 对象中找到，则使用 fallbackLocale 作为备选语言
    messages: {
        'zh-cn': require('./locales/zh-cn.json'),
        'en-us': require('./locales/en-us.json')
    }
})

In the above code, we instantiate an i18n object through new VueI18n(), and specify a default language locale of 'en-us', and a The alternative language fallbackLocale is 'zh-cn'. The messages attribute is an object that lists all languages ​​that need to be supported, and uses a JSON file to store the translation information corresponding to each language.

In the above code, we save the Chinese translation information in the locales/zh-cn.json file and the English translation information in the locales/en-us.json file. Next, we need to fill in the translation information for these two files respectively.

Step 3: Fill in the language translation information

In the locales/zh-cn.json file, we can write the translation information in the following way:

{
    "Welcome": "欢迎使用 Vue",
    "Hello": "你好，世界！"
}

In locales/ In the en-us.json file, we can write translation information in the following way:

{
    "Welcome": "Welcome to Vue",
    "Hello": "Hello, world!"
}

In the above example, "Welcome" and "Hello" are the translation keys, and the following string is Translated text (value).

Note: For detailed information on how to translate your content, please find translation resources yourself.

Step 4: Use translation information

Once i18n has been configured, we can use the translation information in the Vue.js component. In the sample code, we use the $t() method to implement translation. We only need to add the $t() method before the text that needs to be translated.

The sample code is as follows:

<template>
  <div>
    <h1 id="t-Welcome">{{$t('Welcome')}}</h1>
    <p>{{$t('Hello')}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

In the above code, we can find that both text blocks are translated using the $t() method, and "Welcome" and "Hello" It is the translation key that has been defined in the JSON file.

If you want to change the current language, you can define a method in the component to update the $i18n.locale property. For example, if you want to switch to English, you can do it with the following code:

this.$i18n.locale = 'en-us'

Step 5: Use syntax sugar

Vue-i18n also provides some syntax sugar to simplify some common use cases realization.

For example, we can use the $t() method to display the translated text with variables. For example:

<template>
  <div>
    <h1 id="t-Welcome-name-userName">{{ $t('Welcome', { name: userName }) }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userName: 'Alice'
    }
  },
}
</script>

In the above example, we use the data() method of the Vue component to define a variable named userName, and then reference the variable in the second parameter of the $t() method. For example, dynamically translate text like "Welcome, Alice!"

Summary

Using i18n plug-ins is a popular method to implement multi-language switching in Vue. After completing the configuration and language translation information using the i18n plug-in, we can use the $t() method in the component to display the translated text. During implementation, syntactic sugar can also be used to simplify common use cases. I hope this article can help you better understand how to use i18n in Vue.js.

The above is the detailed content of Tips for using i18n to implement multi-language switching in Vue. For more information, please follow other related articles on the PHP Chinese website!