How to handle multi-language and internationalization in Vue

How to deal with multi-language and internationalization in Vue

In today's global environment, in order to better serve global users, multi-language and internationalization have become The basic needs of a website or application. As a popular front-end framework, Vue provides simple and powerful tools to help us deal with multi-language and internationalization.

1. Preparation
Before we start, we need to install Vue and its related plug-ins. First make sure you have Node.js and npm installed. Run the following command on the command line to install Vue CLI (command line tool):

npm install -g @vue/cli

Next, create a new Vue project using Vue CLI:

vue create my-app

Select the configuration according to the prompts. You can choose the default configuration. After the project is created, enter the project folder:

cd my-app

Install the vue-i18n plug-in, which is an international plug-in officially recommended by Vue:

npm install vue-i18n

After the installation is completed, We can start dealing with multilingualism and internationalization.

2. Create a language file
Create a locales folder under the src folder, and create a en.json## in it #And a zh.json file. These two files are used to store English and Chinese translation texts respectively.

{
  "hello": "Hello",
  "welcome": "Welcome to my app"
}

{
  "hello": "你好",
  "welcome": "欢迎来到我的应用"
}

in the
src folder Create a i18n folder and create an index.js file inside it.

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

Vue.use(VueI18n)

const messages = {
  en: require('./locales/en.json'),
  zh: require('./locales/zh.json')
}

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

export default i18n

messages object that contains English and Chinese translated text.

locale and fallbackLocale properties. Finally, pass the messages object as a parameter to the constructor of VueI18n.

It is very simple to use multiple languages ​​in Vue components. Just use the
$t() method in the text that needs to be translated, and pass in the corresponding key name.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

$t('hello') and $t('welcome') will Automatically translate into corresponding text according to the current language environment.

In addition to automatically translating text according to the locale, Vue-i18n also provides methods to switch languages.

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n'

export default {
  methods: {
    changeLanguage(lang) {
      i18n.locale = lang
    }
  }
}
</script>

changeLanguage method to the button to switch the language, and passed in different parameters to changei18nThe locale of the instance.

By using the Vue-i18n plug-in, handling multi-language and internationalization becomes very simple. We only need to prepare the language file, configure Vue-i18n, and then use the
$t() method in the text that needs to be translated.

The above is the detailed content of How to handle multi-language and internationalization in Vue. For more information, please follow other related articles on the PHP Chinese website!