Vue 中英文轉換 vue-i18n 的使用

一、安裝

npm install vue-i18n

二、使用

在 src 下建立 lang 資料夾。

1、準備語言包
本例我準備了兩種語言包，分別是中文和英文：zn、en。在 lang 下建立兩個檔案，zn.js 和 en.js。

// zn.js
export default {
  main:{
    message:"訊息",
    display:"展示"
  }
};

// en.js
export default {
  main:{
    message:"message",
    display:"display"
  }
}

2、準備翻譯的語言環境
在 lang 下建立 index.js，使用如上的兩種語言包

import Vue from "vue";
import VueI18n from 'vue-i18n'
import zn from "./zn"
import en from "./en"
Vue.use(VueI18n);   // 全域性註冊國際化包
 
// 準備翻譯的語言環境資訊
const i18n = new VueI18n({
  locale: "zn",   // 初始化中文
  messages: {
    "zn":zn,
    "en":en
  }
}); 
 
export default i18n

3、實現語言翻譯
在 main.js 中將 i18n 注入 vue 中

import i18n from './lang'
new Vue({
  el: '#app',
  router,
  store,
  i18n,   // 注入，不能缺少
  components: { App },
  template: '<App/>'
})

使用方式

（1）直接使用

<template>
  <div style="width: 100%;">
    <div>
      <div>
        <span>{{$t('main.message')}}</span>
      </div>
    </div>
  </div>
</template>

（2） 語言切換

<template>
  <div style="width: 100%;">
    <div>
      <div>
        <span>{{$t('main.message')}}</span>
        <button @click="changeLang">切換語言</button>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    changeLang() {
      if(this.$i18n.locale === 'zn'){   // 判斷當前語言
        this.$i18n.locale = 'en'   // 設定當前語言
      } else {
        this.$i18n.locale = 'zn'
      }
    }
  }
}
</script>

三、整合 ElementUI 語言包

我們可以整合 ElementUI 中存在的語言包。

1、擴充套件中文

// zn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'   //引入element語言包
export default {
  main:{
    message:"訊息",
    display:"展示"
  },
  ...zhLocale
};

2、擴充套件英文

// en.js
import enLocale from 'element-ui/lib/locale/lang/en'   //引入element語言包
export default {
  main:{
    message:"message",
    display:"display"
  },
  ...enLocale
}

根據上圖（語言包）取可翻譯欄位

<p>{{$t('el.colorpicker.confirm')}}</p>
 
// 中文“確定”，英文“OK”

四、問題記錄

報錯的原因主要是因為當前使用的版本不匹配，解決方案入下。

npm install vue-i18n@8

》》》vue-i18n使用方案梳理，可供參考使用