How to implement page internationalization and multi-language switching in Vue technology development

How to implement page internationalization and multi-language switching in Vue technology development

Introduction:
With the development of globalization, more and more applications Multi-language support is required. In the development of Vue technology, how to implement page internationalization and multi-language switching has become particularly important. This article will introduce how to use the Vue-i18n plug-in to implement page internationalization and multi-language switching, and provide specific code examples to help readers better understand.

1. Introduction to Vue-i18n
Vue-i18n is an internationalization plug-in for Vue.js, which allows us to easily implement multi-language switching and page internationalization. It provides a translation function and a translation directive that allow us to use different languages ​​in templates and scripts.

2. Use Vue-i18n to achieve page internationalization

1. Install Vue-i18n
   First, install Vue-i18n in the project, which can be installed through npm ：

   npm install vue-i18n

   Copy after login

2. Create language pack file
   Create a locales directory in the src directory, and create a json file in it to store the translated text of each language. For example, create a zh.json file to store Chinese translated text:

   // zh.json
   {
     "hello": "你好",
     "welcome": "欢迎来到我的网站"
   }

   Copy after login

3. Configure Vue-i18n
   Configure Vue-i18n in the main.js file and change the language The package file imports and configures the Vue-i18n instance:

   // main.js
   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   import zh from './locales/zh.json';
   
   Vue.use(VueI18n);
   
   const i18n = new VueI18n({
     locale: 'zh',
     messages: {
    zh
     }
   });
   
   new Vue({
     i18n,
     render: h => h(App)
   }).$mount('#app');

   Copy after login

4. Use the translation function in the template
   In the template of the Vue component, you can use the translation function $t provided by Vue-i18n to translate. For example, in a HelloWorld component:

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

   Copy after login

5. Switch language
   Vue-i18n also provides a method for switching language $locale, which can realize the page change by switching different locales. Multi-language switching. For example, provide a drop-down menu in the component to switch languages:

   <template>
     <div>
    <select v-model="$i18n.locale">
      <option value="zh">中文</option>
      <option value="en">English</option>
    </select>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
     </div>
   </template>

   Copy after login

3. Summary
This article introduces how to use Vue-i18n to achieve page internationalization and multi-language switch. By installing the Vue-i18n plug-in, creating a language pack file, configuring the Vue-i18n instance, and then using the translation function $t in the template to achieve internationalization and multi-language switching. In the component, you can switch the language by switching the locale. I hope this article can help readers better understand how to implement page internationalization and multi-language switching in Vue technology development.

(Total word count: 560 words)

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