How to use Vue to achieve multi-language and internationalization?

With the development of globalization, multi-language and internationalization have increasingly become one of the necessary functions of a website or application. As a popular front-end framework, Vue also has flexible solutions in this regard. This article will introduce how to use Vue to achieve multi-language and internationalization.

1. Install Vue-i18n

Vue-i18n is an international plug-in for Vue.js that can help us achieve multi-language and internationalization. First you need to install Vue-i18n in the project.

npm install vue-i18n --save

2. Create language files

Create an i18n folder in the project to store language files.

Create a file named index.js in the i18n folder to configure Vue-i18n.

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

In the above code, locale indicates the currently used language, and English is used by default. messages represents the language file used, where en.json (English) and zh.json (Chinese) are introduced respectively.

Now you can create en.json and zh.json files in the i18n folder and write language content.

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3. Using Vue-i18n

Using Vue-i18n in components is very simple, just need Just add $tc (translation) or $t (formatting) to the template.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

In the above code, both $t and $tc can be used for translation. The difference is that $t can be formatted and $tc can be pluralized according to parameters. It also demonstrates the use of the $t method in the computed attribute and the modification of the language in the component's created life cycle.

4. Use the Vue CLI plug-in

Vue CLI provides the official plug-in vue-cli-plugin-i18n, which can quickly integrate multi-language and internationalization.

First you need to install the plug-in.

vue add i18n

After successful installation, a locales folder will be generated in the project to store language files.

Modify the src/i18n.js file.

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

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

In the above code, the loadLocaleMessages function is used to automatically load the language files in the locales folder and return the messages object. In addition, the default language and fallback language can be set through the environment variables VUE_APP_I18N_LOCALE and VUE_APP_I18N_FALLBACK_LOCALE.

Use the $te method in the component to determine whether the key value exists, and the $d method to format the date.

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

The above is the basic method of using Vue to achieve multi-language and internationalization. Through the Vue-i18n plug-in or Vue CLI plug-in, you can easily implement multi-language and internationalization functions, making the website or application more in line with the trend of globalization.

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