點擊上方藍(lán)字"小黑在哪里"關(guān)注我吧

• 語言選項

• 語言切換

• • 注意

前言

上一篇介紹了ABP擴(kuò)展實體，并且在前端部分新增了身份認(rèn)證管理和租戶管理的菜單，在實現(xiàn)這兩個功能模塊前，先來解決一下界面文字國際化的問題。

開始

國際化（簡稱 I18N），本地化（簡稱 L10N）；這兩者的目的都是用于讓你的應(yīng)用程序支持多個國家和區(qū)域的語言，它們看起來很相似，但是有一些細(xì)微的區(qū)別，本文不對此進(jìn)行深入探討，有興趣的可以自行搜索。ABP后端支持的是本地化，而vue-element-admin支持的是國際化，使用vue-i18n實現(xiàn)；本文默認(rèn)它兩者是一回事。

前面的章節(jié)中，已經(jīng)大概分析了vue+ABP國際化的實現(xiàn)思路。我們可以在后端實現(xiàn)國際化，然后vue從后端獲取國際化文本，展示到界面中；另一種方式是直接在前端部分實現(xiàn)國際化。在前端實現(xiàn)就很簡單，直接在vue-element-admin的src\lang\目錄下配置相應(yīng)的文本，然后界面使用i18n的$t()方法渲染就可以了，這個不多做介紹。本文只探討第一種實現(xiàn)方式。

語言選項

首先，語言選項列表需要根據(jù)后端配置得到。

在后端修改支持的語言類型，這里就只支持中文和英文2種吧，其他的注釋掉。

src\Xhznl.HelloAbp.HttpApi.Host\HelloAbpHttpApiHostModule.cs：

請求abp/application-configuration接口：

此時返回的localization.languages屬性只有2個語言了，然后只需要把這個數(shù)據(jù)綁定到界面上就好了。語言切換用的是一個公共組件 src\components\LangSelect\index.vue：

<template><el-dropdowntrigger="click"class="international"@command="handleSetLanguage"><div><svg-icon class-name="international-icon" icon-class="language" /></div><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="item in languages":key="item.cultureName":disabled="language === item.cultureName":command="item.cultureName">{{ item.displayName }}</el-dropdown-item></el-dropdown-menu></el-dropdown> </template><script> export default {data() {return {languages: this.$store.getters.abpConfig.localization.languages};},computed: {language() {return this.$store.getters.language;}},methods: {handleSetLanguage(lang) {//this.$i18n.locale = langthis.$store.dispatch("app/setLanguage", lang);this.$store.dispatch("app/applicationConfiguration").then(() => {this.$message({message: "Switch Language Success",type: "success"});});}} }; </script>

語言切換

語言切換時，需要再次調(diào)用app/applicationConfiguration接口，更新本地化文本。

src\utils\request.js：

//?request?interceptor service.interceptors.request.use(config?=>?{//?do?something?before?request?is?sentconfig.headers['accept-language']?=?store.getters.languageif?(store.getters.token)?{config.headers['authorization']?=?'Bearer?'?+?getToken()}return?config},error?=>?{//?do?something?with?request?errorconsole.log(error)?//?for?debugreturn?Promise.reject(error)} )

src\store\modules\app.js：

const?actions?=?{。。。。。。applicationConfiguration({?commit?})?{return?new?Promise((resolve,?reject)?=>?{applicationConfiguration().then(response?=>?{const?data?=?response;commit("SET_ABPCONFIG",?data);const?language?=?data.localization.currentCulture.cultureName;const?values?=?data.localization.values;setLocale(language,?values);resolve(data);}).catch(error?=>?{reject(error);});});} };

src\lang\index.js：

import?Vue?from?"vue"; import?VueI18n?from?"vue-i18n"; import?Cookies?from?"js-cookie"; import?elementEnLocale?from?"element-ui/lib/locale/lang/en";?//?element-ui?lang import?elementZhLocale?from?"element-ui/lib/locale/lang/zh-CN";?//?element-ui?langVue.use(VueI18n);const?messages?=?{en:?{...elementEnLocale},"zh-Hans":?{...elementZhLocale} };export?function?getLanguage()?{const?chooseLanguage?=?Cookies.get("language");if?(chooseLanguage)?return?chooseLanguage;//?if?has?not?choose?languageconst?language?=?(navigator.language?||?navigator.browserLanguage).toLowerCase();const?locales?=?Object.keys(messages);for?(const?locale?of?locales)?{if?(language.indexOf(locale)?>?-1)?{return?locale;}}return?"en"; } export?function?setLocale(language,?values)?{i18n.mergeLocaleMessage(language,?values);i18n.locale?=?language; } const?i18n?=?new?VueI18n({//?set?locale//?options:?en?|?zh?|?eslocale:?getLanguage(),//?set?locale?messagesmessages });export?default?i18n;

將后端返回的文本設(shè)置到vue-i18n中，就可以使用了。這跟直接在前端做國際化有一點區(qū)別就是，后者的文本信息是寫在前端，vue-i18n可以直接使用。而這里只是把文本信息改到后端，從后端獲取后再設(shè)置到i18n中，本質(zhì)是一樣的。

修改后端的配置文本：

src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\zh-Hans.json：

src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\en.json：

localization.values返回：

接下來只需要把界面上對應(yīng)的文本使用vue-i18n的$t()方法渲染就好了，比如：

前端需要改動的地方比較多，但都是類似的修改。。。直接看效果：

注意

因為app/applicationConfiguration接口只有在刷新頁面、登錄、退出、切換語言等操作的時候才會去調(diào)用，所以不用擔(dān)心請求頻繁。

其實上面有一部分本地化文本還是放在了前端：ElementUI自帶的文本。因為ABP的本地化json格式只能有一級，key/value：

文本只能寫在texts屬性中，key/value形式，不支持多層級。

而vue-i18n是支持多層級的：

所以ElementUI的這部分文本還是放在前端了。

最后

本篇關(guān)于vue+ABP實現(xiàn)國際化就介紹完了。。。其實還是有點繁瑣的，要配置的比較多，不知道有沒有更好的方法，歡迎評論交流。。。

如果本文對您有用，

不妨點個“在看”或者轉(zhuǎn)發(fā)朋友圈支持一下

總結(jié)

以上是生活随笔為你收集整理的初识ABP vNext（6）：vue+ABP实现国际化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。