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 change
i18nThe 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!