How to implement internationalization functions in Vue projects

How to implement international functions in Vue projects

With the development of the Internet and the wave of globalization, more and more projects need to support multi-language functions in order to Meet the needs of different users in international services. In the Vue project, the internationalization function can be easily implemented by using the vue-i18n library. This article will introduce how to implement internationalization functions in Vue projects and provide specific code examples.

Step 1: Install the vue-i18n library
First, open the terminal in the root directory of the Vue project and execute the following command to install the vue-i18n library:

npm install vue-i18n

Step 2: Create Language file
Create a lang directory in the src directory to store language files. Create two files, zh.js and en.js, in the lang directory to store Chinese and English language key-value pairs respectively.

The content of the zh.js file is as follows:

export default {
  hello: '你好',
  world: '世界',
  greeting: '欢迎',
  ...
}

The content of the en.js file is as follows:

export default {
  hello: 'Hello',
  world: 'World',
  greeting: 'Welcome',
  ...
}

Step 3: Create a vue-i18n instance
Create it in the src directory A lang folder, create the index.js file, the specific code is as follows:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

const messages = {
  zh,
  en
}

const i18n = new VueI18n({
  locale: 'en',  // 设置默认语言为英文
  messages
})

export default i18n

Step 4: Use the internationalization function in the main component
Introduce the vue-i18n instance into the main component, and add it to the template Use the $t method to obtain the corresponding internationalized text.

<template>
  <div>
    <h1 id="t-hello">{{$t('hello')}}</h1>
    <p>{{$t('world')}}</p>
    <p>{{$t('greeting')}}</p>
  </div>
</template>

<script>
import i18n from '../lang'

export default {
  name: 'App',
  i18n
}
</script>

Step 5: Switch language
In other components, we can switch the language through $i18n.locale, the specific code is as follows:

<template>
  <div>
    <button @click="changeLanguage('zh')">中文</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>

<script>
import i18n from '../lang'

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

By clicking button, we can switch between Chinese and English interfaces.

The above are the detailed steps and code examples for implementing internationalization functions in the Vue project. Through the vue-i18n library, we can easily implement multi-language support and improve the user experience of the project. I hope this article can help you learn and use the internationalization functions of Vue projects.

The above is the detailed content of How to implement internationalization functions in Vue projects. For more information, please follow other related articles on the PHP Chinese website!