初识ABP vNext（6）：vue+ABP实现国际化

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Tips：本篇已加入系列文章阅读目录，可点击查看更多相关文章。

前言
开始
- 语言选项
- 语言切换
  - 注意
最后

前言

上一篇介绍了ABP扩展实体，并且在前端部分新增了身份认证管理和租户管理的菜单，在实现这两个功能模块前，先来解决一下界面文字国际化的问题。

开始

国际化（简称 I18N），本地化（简称 L10N）；这两者的目的都是用于让你的应用程序支持多个国家和区域的语言，它们看起来很相似，但是有一些细微的区别，本文不对此进行深入探讨，有兴趣的可以自行搜索。ABP后端支持的是本地化，而vue-element-admin支持的是国际化，使用vue-i18n实现；本文默认它两者是一回事。

前面的章节中，已经大概分析了vue+ABP国际化的实现思路。我们可以在后端实现国际化，然后vue从后端获取国际化文本，展示到界面中；另一种方式是直接在前端部分实现国际化。在前端实现就很简单，直接在vue-element-admin的src\lang\目录下配置相应的文本，然后界面使用i18n的$t()方法渲染就可以了，这个不多做介绍。本文只探讨第一种实现方式。

语言选项

首先，语言选项列表需要根据后端配置得到。

在后端修改支持的语言类型，这里就只支持中文和英文2种吧，其他的注释掉。

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

请求abp/application-configuration接口：

此时返回的localization.languages属性只有2个语言了，然后只需要把这个数据绑定到界面上就好了。语言切换用的是一个公共组件 src\components\LangSelect\index.vue：

<template> <el-dropdown trigger="click" class="international" @command="handleSetLanguage" > <div> <svg-icon class-name="international-icon" icon-class="language" /> </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-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 = lang this.$store.dispatch("app/setLanguage", lang); this.$store.dispatch("app/applicationConfiguration").then(() => { this.$message({ message: "Switch Language Success", type: "success" }); }); } } }; </script>

语言切换

语言切换时，需要再次调用app/applicationConfiguration接口，更新本地化文本。

src\utils\request.js：

// request interceptor service.interceptors.request.use( config => { // do something before request is sent config.headers['accept-language'] = store.getters.language if (store.getters.token) { config.headers['authorization'] = 'Bearer ' + getToken() } return config }, error => { // do something with request error console.log(error) // for debug return 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 language const 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 | es locale: getLanguage(), // set locale messages messages });export default i18n;