The latest vue-i18n international plug-in realizes language switching (with source code)

1. install i18n Plug ins and elementUI plug-in unit

npm install vue-i18n --save
npm i element-ui -S

2.main.js Global mount i18n and elementUI mount

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//  introduce vuei18n
import VueI18n from 'vue-i18n'
//  In the form of plug-ins 
Vue.use(VueI18n)
// establish VueI18n example 
const i18n = new VueI18n({
  locale: localStorage.getItem('language') || 'zh', // Language mark 
  messages: {
    'zh': require('../src/assets/lang/zh'),
    'en': require('../src/assets/lang/en')
  },
   silentTranslationWarn: true, //  Remove internationalization warnings 
})


new Vue({
  router,
  store,
  i18n, 				//  Note that you should also add , export i18n!!!!
  render: h => h(App)
}).$mount('#app')

Location of the local language resource pack , Here's the picture

3. Language file

en.js, The code is as follows

module.exports = {
  i18n: {
      breadcrumb: 'International projects',
      tips: 'Change the language of the current content by switching the language button.',
      btn: 'switch language',
      title1: 'News sentence',
      p1: "1. Open news web pages and contact tools every day to get together with the world. Some people refuse to alienate themselves from the world. But some people are alienated from themselves when they are close to the world, because your meaning does not occupy a position in it.",
      p2: "2. News is like an onion, because as long as you peel off a layer of skin called truth, you can see another truth. Just like peeling an onion, the true facts can be obtained only after continuous doubt and evidence collection.",
      p3: "3. In the face of absolute power, freedom of the press and innocence of speech are floating clouds."
  }
}

zh.js, The code is as follows

module.exports = {
  i18n: {
    breadcrumb: ' International projects ',
    tips: ' By switching the language button , To change the language of the current content .',
    btn: ' switch language ',
    title1: ' News sentences ',
    p1: '1、 Open news pages and contact tools every day , Be united with the world . Some people refuse to alienate , Alienation from the world . But some people are close to the world , But alienated from itself , Because your meaning doesn't occupy a place in it . ',
    p2: '2、 News is like onions , Because just peel off a layer of skin called truth , You can see another truth . It's like peeling an onion , Through constant doubt and evidence , To get the real facts . ',
    p3: '3、 In the face of absolute power , What freedom of the press 、 Innocent speech , Are floating clouds . ',
  }
}

4. Use in components

The source code of the first method is as follows :

<template>
  <div>
    <el-card>
      <span>{
   { $t("i18n.tips") }}</span>
      <el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh' ? 'en' : 'zh'">{
   { $t("i18n.btn") }}
      </el-button>
      <div class="list">
        <h2>{
   { $t("i18n.title1") }}</h2>
        <p>{
   { $t("i18n.p1") }}</p>
        <p>{
   { $t("i18n.p2") }}</p>
        <p>{
   { $t("i18n.p3") }}</p>
      </div>
    </el-card>
  </div>
</template>
<script> export default {
       } </script>
<style> </style>

The effect is as follows

The source code of the second method is as follows :

<template>
  <div>
    <span> switch language ：</span>
    <select v-model="selLocale" placeholder=" switch language ">
      <option value="zh"> Simplified Chinese </option>
      <option value="en">English</option>
    </select>
    <h2>{
   { $t("i18n.title1") }}</h2>
    <p>{
   { $t("i18n.p1") }}</p>
    <p>{
   { $t("i18n.p2") }}</p>
    <p>{
   { $t("i18n.p3") }}</p>
  </div>
</template>
<script> export default {
       name: 'Home', data () {
       return {
       selLocale: this.$i18n.locale } }, watch: {
       // Switch between multiple languages  selLocale (newValue) {
       this.$i18n.locale = newValue; localStorage.setItem("language", newValue); console.log(this.$t("message.hello")); console.log(this.$i18n.t("message.hello")); } }, } </script>

The effect is as follows

The source code of the third writing method is as follows :

<template>
  <div>
    <!--  switch language -->
    <el-dropdown trigger="click" @command="handleSetLanguage">
      <div>
        <span class="el-dropdown-link">
           Click to switch <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
           chinese 
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <h2>{
   { $t("i18n.title1") }}</h2>
    <p>{
   { $t("i18n.p1") }}</p>
    <p>{
   { $t("i18n.p2") }}</p>
    <p>{
   { $t("i18n.p3") }}</p>
  </div>
</template>

<script> export default {
       name: 'Home', data () {
       return {
       selLocale: this.$i18n.locale } }, methods: {
       handleSetLanguage (lang) {
       this.$i18n.locale = lang; this.language = lang; localStorage.setItem("lang", lang); }, // Switch between Chinese and English  changeLang (val) {
       let locale = this.$i18n.locale; if (val == this.$t("English")) {
       locale === "zh" ? (this.$i18n.locale = "en") : (this.$i18n.locale = "zh"); localStorage.lang = this.$i18n.locale; this.language = this.$t("English"); document.title = 456; } else if (val == this.$t(" chinese ")) {
       locale === "zh" ? (this.$i18n.locale = "en") : (this.$i18n.locale = "zh"); localStorage.lang = this.$i18n.locale; this.language = this.$t(" chinese "); } }, // Verify that the form is updated in a timely manner  reload () {
       this.isActiveRoute = false; this.$nextTick(() => {
       this.isActiveRoute = true; }); }, }, created () {
       this.account = window.localStorage.getItem("account"); this.activePath = window.sessionStorage.getItem("activePath"); if (this.$i18n.locale == "en") {
       this.language = this.$t("English"); } else {
       this.language = this.$t(" chinese "); } }, watch: {
       "$i18n.locale" (newVal, oldVal) {
       if (newVal != oldVal) {
       this.reload(); } }, }, } </script>

The effect is as follows

5. Calling method

label Inside call

<div>{ { $t("i18n.title1") }}</div>

label On call

<el-input :placeholder="$t('lang.input.PleaseEnterTheRoleName')"></el-button>

js Calling method

  data () {
    
    return {
    
      message:this.$t('i18n.title1')
    }
  }

If you feel the article is good, remember to pay attention and collect , If there is something wrong, please correct it , If you need to reprint , Please indicate the source , Thank you very much ！！！