Chinese and English switching, Vue project internationalization tutorial (detailed internationalization, i18n internationalization)

Brief description: In our work, we will inevitably encounter the need to switch the text to a foreign language. Here is a record how to click to switch to English in the project. Here we will use i18n, which is a plug-in that supports internationalization. Here to share its use process.

1. First, we need to execute this command in the project to download and install related dependencies.

npm install vue-i18n

2. Create a language pack file, langue folder, and then create files for the default language and translation language under this folder, such as zh.js and en.js, and write the text you need to display and translate in the file. Then export, and finally create a new i18n.js file to import the zh.js and en.js files, so that the overall structure is clearer, as shown below.

zh.js：

export default {
  demo1: {
    welcome: "你好，世界",
  },
  demo2: {
    name1: "托尼",
    name2: "杰克",
  },
}

 en.js：

export default {
  demo1: {
    welcome: "Hello,world!"
  },
  demo2: {
    name1: "toni",
    name2: "jack",
  },
}

 Introduce the required files in the i18n.js file, and export the data after processing;

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

import zhLocale from "./zh";
import enLocale from "./en";


const messages = {
  zh: {
    ...zhLocale,
  },
  en: {
    ...enLocale
  }
}

const i18n = new VueI18n({
  locale: "zh",
  messages
})

export default i18n;

3. Introduce in main.js , mount and use;

import i18n from "../src/langue/i18n.js"
console.log(i18n);

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

The console outputs i18n, and VueI18n prints successfully:

4. Specific use

Display text with  { {$t('')}}   and  v-text="$t('')"  :

<div>{
   
   {$t('demo1.welcome')}}</div>

<div v-text="$t('demo1.welcome')"></div>

                Use   this.$i18n.locale   to modify the language display status, when you assign the value 'zh', it becomes Chinese,

When the assignment is 'en', it becomes English:

 // 点击事件
choseLanguage() {
      
      const res = this.$i18n.locale;
      this.$i18n.locale = res == 'zh' ? res = 'en' : res = 'zh';

}

          this.$i18n.localeUsed to get the value of the current locale, and can also be used to dynamically change the locale. You can change its value to another supported language code to switch to that locale. For example: this.$i18n.locale = 'fr'will change the locale of the application to French.

5. The final effect 

Tips: Of course, if there is less data, you can directly import it in main.js and configure it for use. The usage method is the same:

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    en: {
      loginTxt: "login",
      change: 'change'
    },
    zh: {
      loginTxt: '登录',
      change: '切换'
    }
  }
})

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

For more details, see>>

Vue I18n official website https://kazupon.github.io/vue-i18n/zh/installation.html#%E5%85%BC%E5%AE%B9%E6%80%A7%E8%AF%B4%E6 %98%8E

If you find it useful, just click three times, thank you (●'◡'●)