組件庫中怎么使用vue-i18n

這篇文章主要介紹了組件庫中怎么使用vue-i18n的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇組件庫中怎么使用vue-i18n文章都會有所收獲，下面我們一起來看看吧。

項目中使用 i18n

不贅述，這里只是做個比較參考，直接抄官方文檔

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 準備翻譯的語言環境信息
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
// 通過選項創建 VueI18n 實例
const i18n = new VueI18n({
  locale: 'ja', // 設置地區
  messages, // 設置地區信息
})
// 通過 `i18n` 選項創建 Vue 實例
new Vue({ i18n }).$mount('#app')

<template>  
  <div id="app">
    <p>{{ $t("message.hello") }}</p>
  </div>
</template>

組件庫中使用 i18n

需求

• 組件庫代碼中配置 i18n ，并在組件中注冊和使用

• 頁面中若使用 i18n，可以合并和覆蓋組件庫的 i18n 配置

• element-ui 的 i18n 在組件庫中注冊，頁面無需再注冊

• 頁面切換語言時，組件庫和 element-ui 的語言也一起切換

未添加 i18n 前的組件庫

正常組件庫的入口文件，是一個很標準的 export ，供頁面進行 Vue.use() 調用。

這個模塊沒有特殊意義，只是作為基礎代碼展示，以及與下面加入 i18n 的代碼做對比。

const components = {}; // 具體封裝的組件這里不做贅述
const install = function (Vue, options = {}) {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key]);
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version,
  install,
  ...components
};

組件庫 i18n 的配置文件

先在 ./lang 路徑下新建語言文件，如 en.js、zh-CN.js 等（數據格式參考 vue-i18n）

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
// 配置從文件讀取
const req = require.context('./lang', false, /.js$/)
const modules = req.keys().map(k => {
  let name = k.match(/./(.+).js/)[1]
  return {
    name: name,
    webLocale: req(k).default,
    elementLocale: require(`element-ui/lib/locale/lang/${name}`).default // 加入 element 的 i18n
  }
})
// 注冊 i18n
let i18n = new VueI18n({
  locale: 'zh-CN',
  messages: getMessages(),
})
// 對外暴露的合并配置項的方法
export function i18nLocale(config, lang = 'zh-CN') {
  i18n = new VueI18n({
    locale: lang,
    messages: getMessages(config),
  })
  return i18n;
}
// 合并方法
function getMessages(config = []) {
  return modules.reduce((sum, item) => {
    let conf = config.find(m => m.locale === item.name) || {};
    let locale = conf.locale || item.name;
    sum[locale] = {
      ...item.elementLocale, // element 的語言配置
      ...item.webLocale, // 組件庫的語言配置
      ...conf.message, // 頁面的語言配置
    }
    return sum;
  }, {})
}
export default i18n;

組件庫的輸出文件

import i18n, { vueI18nLocale } from './locale';
import element from 'element-ui';
const components = {}; // 具體封裝的組件這里不做贅述
// 傳入一個 options ，為了將 element 的國際化合并方法傳入組件庫
// 經實驗，element 的國際化合并在頁面觸發有效，在組件庫中觸發無效，故此操作
const install = function (Vue, options = {}) {
  Object.keys(components).forEach((key) => {
    Vue.component(key, components[key]);
  });
  // 在頁面使用組件庫，進行 Vue.use 的時候注冊，能保證相同的 Vue 實例
  // 這句是關鍵！不能使用 Vue.prototype.$i18n = i18n; 會報錯，報錯原因是與 vue-i18n 內部的變量重名，故這里使用 $i18n_ 代替，但這不影響頁面使用 $i18n
  Object.defineProperty(Vue.prototype, '$i18n_', {
    get() {
      // 此 this 為頁面 vue 實例，若頁面配置了國際化，則使用頁面的實例，否則用組件庫的國際化
      return this.$i18n || i18n;
    },
    configurable: true
  });
  // 在此注冊 element，并將頁面傳入的國際化合并方法，繼續傳入到 element
  Vue.use(element, {
    i18n: options.i18n || ((key, value) => i18n.t(key, value))
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version,
  vueI18nLocale, // 導出合并語言配置項的方法
  install,
  ...components
};

組件庫中使用 i18n

因為命名問題，只能使用 this.$i18n_ 而不是 this.$i18n

<div v-bind="$i18n_.t('textPart.textNum')"></div>

項目中使用組件庫和 i18n

import Vue from 'vue';
import web from '../src/index'; // 組件庫，無需再引用 element
// 頁面的國際化配置，同樣需要新建對應的語言文件
const req = require.context('./lang', false, /.js$/);
const localeConfig = req.keys().map((k) => {
  let name = k.match(/./(.+).js/)[1];
  return {
    locale: name, // 需要與組件庫的語言類型一一對應
    message: req(k).default
  };
});
// 使用組件庫暴露的合并配置項方法，獲得新的 i18n 實例
// 該 i18n 包含了組件庫的 i18n 和 頁面的 i18n 
const i18n = web.i18nLocale(localeConfig, 'zh-CN');
// 注冊組件庫的同時，傳入 element 的國際化合并方法
// 此時，該 i18n 包含了 element、組件庫、頁面 的 i18n
Vue.use(web, {
  i18n: (key, value) => i18n.t(key, value)
});
export default new Vue({
  el: '#app',
  router,
  i18n, // 將 i18n 注冊到頁面 vue 實例
  components: { App },
  template: '<App/>'
});

頁面展示和切換 i18n

這里能展示 element、組件庫、頁面 的語言變量，切換語言也是三者一起切換

<template>
  <div>
    <!-- 兩種寫法返回值相同 -->
    <div v-bind="$t('textPart.textNum')"></div>
    <div v-bind="$i18n.t('textPart.textNum')"></div>
    <div @click="changeI18n">切換語言</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    methods: {
      changeI18n() {
        // 這里的 this.$i18n 包含了 element、組件庫、頁面 的 i18n
        // 然后這里還有一個 this.$i18n_ ，是單獨組件庫的 i18n
        this.$i18n.locale = 'en';
      }
    }
  };

關于“組件庫中怎么使用vue-i18n”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“組件庫中怎么使用vue-i18n”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。