iview實現國際化

由於項目需求需要配置國際化,使用的UI框架為iview, 按照官方要求下載 vue-i18n(8.14.0),版本大於6.0 按照官方提供的6.0配置方案解決。

第一步:  創建一個新的目錄 language 目錄, 在該目錄下創建 index.js、en-US.json、zh-CN.json。

　　　index.js 配置i18n: 按照官方文檔引入需要的包，然后配置 (全是按照官方文檔一步一步走)這里直接上代碼

import Vue from 'vue';
import iView from 'iview';
import VueI18n from 'vue-i18n';
import en from 'iview/dist/locale/en-US';
import zh from 'iview/dist/locale/zh-CN';
import US from './en-US';
import CN from './zh-CN'

Vue.use(VueI18n);
Vue.locale = () => {};

const messages = {
  en: Object.assign(US, en),  //將自己的英文包和iview提供的結合
  zh: Object.assign(CN, zh)  //將自己的中文包和iview提供的結合
};

const i18n = new VueI18n({
  locale: localStorage.getItem("locale") || 'en',  // 設置語言,如果本地存儲了則用本地的,沒有則默認 'en'
  messages  // set locale messages
});

Vue.use(iView, { 
  i18n: (key, value) => i18n.t(key, value)
})
//上面這個比較重要 按照官網提供的方法 new Vue({ i18n }).$mount('#app'); 運行會出錯 提示無法找到  _t 屬性。 按照上述方法配置可以解決此問題(網上找的方法,親測沒問題)

//將i18n 導出，在main.js 的 new Vue({}) 中需要配置
export default i18n

　　　main.js 中只需要導入該文件,就可以正常使用了

import i18n from './language'

new Vue({
  el: '#app',
  router,
  i18n, //不配置會不生效的
  components: { App },
  template: '<App/>'
})

　　　en-US.json 配置英文翻譯 這個應該很簡單 我隨便舉了幾個例子

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

　　　zh-CN.json 配置中文翻譯 這個也一樣

{
  "hello" : "你好",
  "welcome": "歡迎光臨"
}

　　在vue文件中使用 {{$t('變量名')}}

<template>
    <div class="containt">
      {{ $t('welcome') }}
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>
  .containt{
    height: 100%;
    width: 100%;
    background-color: #15162C;
    color: #fff;
  }
</style>

　　結果:

　　

　　沒有實現按鍵切換, 所以直接修改language/index.js 文件中的 內容將i8n 改為如下:

const i18n = new VueI18n({
  locale:  'zh',  // set locale
  messages  // set locale messages
});

　　結果如下:

　　

　　上面的配置就可以實現iview的國際化,希望對大家有幫助