张家口市建设局网站,120平三室两厅简约装修,广东公布最新传染了,重庆多功能网站建设昨天在写后台管理系统时#xff0c;遇到一个需求就是需要实现国际化功能。
antd和element-ui这两个框架其实都是有国际化的。
具体展示形式就是如下#xff1a;
点击右上角头部的语言#xff0c;切换语言#xff0c;然后整个系统的文字都改变成对应的语言展示。 切换成…昨天在写后台管理系统时遇到一个需求就是需要实现国际化功能。
antd和element-ui这两个框架其实都是有国际化的。
具体展示形式就是如下
点击右上角头部的语言切换语言然后整个系统的文字都改变成对应的语言展示。 切换成英文的效果如下 下面对整个系统的国际化进行介绍
1.安装i18n插件如果是使用的vue-admin的框架则已经安装过了
具体i18n插件是否安装过了可以在package,json中进行查看。
npm install vue-i18n --save
2.在utils文件夹中添加i18n.js文件——路由的国际化需要单独处理其他的国际化是可以用公用国际化文件的
文件内容如下
import Vue from vue
import VueI18n from vue-i18n
import routesI18n from /router/i18n
import {getI18nKey} from /utils/routerUtil
import CommonI18n from /locales/common.i18n;/*** 创建 i18n 配置* param locale 本地化语言* param fallback 回退语言* returns {VueI18n}*/
function initI18n(locale, fallback) {Vue.use(VueI18n)let i18nOptions {locale,fallbackLocale: fallback,silentFallbackWarn: true,silentTranslationWarn: true,...CommonI18n,}return new VueI18n(i18nOptions)
}/*** 根据 router options 配置生成 国际化语言* param lang* param routes* param valueKey* returns {*}*/
function generateI18n(lang, routes, valueKey) {routes.forEach(route {let keys getI18nKey(route.fullPath).split(.)let value valueKey path ? route[valueKey].split(/).filter(item !item.startsWith(:) item ! ).join(.) : route[valueKey]lang.assignProps(keys, value)if (route.children) {generateI18n(lang, route.children, valueKey)}})return lang
}/*** 格式化 router.options.routes生成 fullPath* param routes* param parentPath*/
function formatFullPath(routes, parentPath ) {routes.forEach(route {let isFullPath route.path.substring(0, 1) /route.fullPath isFullPath ? route.path : (parentPath / ? parentPath route.path : parentPath / route.path)if (route.children) {formatFullPath(route.children, route.fullPath)}})
}/*** 从路由提取国际化数据* param i18n* param routes*/
function mergeI18nFromRoutes(i18n, routes) {formatFullPath(routes)const CN generateI18n(new Object(), routes, name)const US generateI18n(new Object(), routes, path)i18n.mergeLocaleMessage(CN, CN)i18n.mergeLocaleMessage(US, US)const messages routesI18n.messagesObject.keys(messages).forEach(lang {i18n.mergeLocaleMessage(lang, messages[lang])})
}export {initI18n,mergeI18nFromRoutes,formatFullPath
}3.router中添加i18n.js文件——路由的国际化需要单独处理其他的国际化是可以用公用国际化文件的
文件内容如下
注意这个文件中的格式要跟路由配置文件中的格式要保持一致。比如user下面的children子页面有userCenter和changePassword两个则需要像下面的对象一样做嵌套。
messages中的对象多种语言就需要写多个对象对象的key命名最好跟语言中的key保持一致。
module.exports {messages: {CN: {home: { name: 首页 },demo: {name: 演示页,},user: {name: 个人中心,userCenter: { name: 个人信息 },changePassword: { name: 修改账户密码 },},},US: {home: { name: home },demo: {name: Demo Page,},user: {name: user,userCenter: { name: userCenter },changePassword: { name: changePassword },},},HK: {home: { name: 首頁 },demo: {name: 演示頁,},user: {name: 個人中心,userCenter: { name: 個人信息 },changePassword: { name: 修改賬戶密碼 },},},},
};4.utils中添加routerUtil.js文件
文件内容如下
import routerMap from /router/async/router.map
import {mergeI18nFromRoutes} from /utils/i18n
import Router from vue-router
import deepMerge from deepmerge
import basicOptions from /router/async/config.async//应用配置
let appOptions {router: undefined,i18n: undefined,store: undefined
}/*** 设置应用配置* param options*/
function setAppOptions(options) {const {router, store, i18n} optionsappOptions.router routerappOptions.store storeappOptions.i18n i18n
}/*** 根据 路由配置 和 路由组件注册 解析路由* param routesConfig 路由配置* param routerMap 本地路由组件注册配置*/
function parseRoutes(routesConfig, routerMap) {let routes []routesConfig.forEach(item {// 获取注册在 routerMap 中的 router初始化 routeCfglet router undefined, routeCfg {}if (typeof item string) {router routerMap[item]routeCfg {path: router.path || item, router: item}} else if (typeof item object) {router routerMap[item.router]routeCfg item}if (!router) {console.warn(cant find register for router ${routeCfg.router}, please register it in advance.)router typeof item string ? {path: item, name: item} : item}// 从 router 和 routeCfg 解析路由const route {path: routeCfg.path || router.path || routeCfg.router,name: routeCfg.name || router.name,component: router.component,redirect: routeCfg.redirect || router.redirect,meta: {authority: routeCfg.authority || router.authority || routeCfg.meta?.authority || router.meta?.authority || *,icon: routeCfg.icon || router.icon || routeCfg.meta?.icon || router.meta?.icon,page: routeCfg.page || router.page || routeCfg.meta?.page || router.meta?.page,link: routeCfg.link || router.link || routeCfg.meta?.link || router.meta?.link}}if (routeCfg.invisible || router.invisible) {route.meta.invisible true}if (routeCfg.children routeCfg.children.length 0) {route.children parseRoutes(routeCfg.children, routerMap)}routes.push(route)})return routes
}/*** 加载路由* param routesConfig {RouteConfig[]} 路由配置*/
function loadRoutes(routesConfig) {//兼容 0.6.1 以下版本/*************** 兼容 version v0.6.1 *****************/if (arguments.length 0) {const arg0 arguments[0]if (arg0.router || arg0.i18n || arg0.store) {routesConfig arguments[1]console.error(the usage of signature loadRoutes({router, store, i18n}, routesConfig) is out of date, please use the new signature: loadRoutes(routesConfig).)console.error(方法签名 loadRoutes({router, store, i18n}, routesConfig) 的用法已过时, 请使用新的方法签名 loadRoutes(routesConfig)。)}}/*************** 兼容 version v0.6.1 *****************/// 应用配置const {router, store, i18n} appOptions// 如果 routesConfig 有值则更新到本地否则从本地获取if (routesConfig) {store.commit(account/setRoutesConfig, routesConfig)} else {routesConfig store.getters[account/routesConfig]}// 如果开启了异步路由则加载异步路由配置const asyncRoutes store.state.setting.asyncRoutesif (asyncRoutes) {if (routesConfig routesConfig.length 0) {const routes parseRoutes(routesConfig, routerMap)const finalRoutes mergeRoutes(basicOptions.routes, routes)formatRoutes(finalRoutes)router.options {...router.options, routes: finalRoutes}router.matcher new Router({...router.options, routes:[]}).matcherrouter.addRoutes(finalRoutes)}}// 提取路由国际化数据mergeI18nFromRoutes(i18n, router.options.routes)// 初始化Admin后台菜单数据const rootRoute router.options.routes.find(item item.path /)const menuRoutes rootRoute rootRoute.childrenif (menuRoutes) {store.commit(setting/setMenuData, menuRoutes)}
}/*** 合并路由* param target {Route[]}* param source {Route[]}* returns {Route[]}*/
function mergeRoutes(target, source) {const routesMap {}target.forEach(item routesMap[item.path] item)source.forEach(item routesMap[item.path] item)return Object.values(routesMap)
}/*** 深度合并路由* param target {Route[]}* param source {Route[]}* returns {Route[]}*/
function deepMergeRoutes(target, source) {// 映射路由数组const mapRoutes routes {const routesMap {}routes.forEach(item {routesMap[item.path] {...item,children: item.children ? mapRoutes(item.children) : undefined}})return routesMap}const tarMap mapRoutes(target)const srcMap mapRoutes(source)// 合并路由const merge deepMerge(tarMap, srcMap)// 转换为 routes 数组const parseRoutesMap routesMap {return Object.values(routesMap).map(item {if (item.children) {item.children parseRoutesMap(item.children)} else {delete item.children}return item})}return parseRoutesMap(merge)
}/*** 格式化路由* param routes 路由配置*/
function formatRoutes(routes) {routes.forEach(route {const {path} routeif (!path.startsWith(/) path ! *) {route.path / path}})formatAuthority(routes)
}/*** 格式化路由的权限配置* param routes 路由* param pAuthorities 父级路由权限配置集合*/
function formatAuthority(routes, pAuthorities []) {routes.forEach(route {const meta route.metaconst defaultAuthority pAuthorities[pAuthorities.length - 1] || {permission: *}if (meta) {let authority {}if (!meta.authority) {authority defaultAuthority}else if (typeof meta.authority string) {authority.permission meta.authority} else if (typeof meta.authority object) {authority meta.authorityconst {role} authorityif (typeof role string) {authority.role [role]}if (!authority.permission !authority.role) {authority defaultAuthority}}meta.authority authority} else {const authority defaultAuthorityroute.meta {authority}}route.meta.pAuthorities pAuthoritiesif (route.children) {formatAuthority(route.children, [...pAuthorities, route.meta.authority])}})
}/*** 从路由 path 解析 i18n key* param path* returns {*}*/
function getI18nKey(path) {const keys path.split(/).filter(item !item.startsWith(:) item ! )keys.push(name)return keys.join(.)
}/*** 加载导航守卫* param guards* param options*/
function loadGuards(guards, options) {const {beforeEach, afterEach} guardsconst {router} optionsbeforeEach.forEach(guard {if (guard typeof guard function) {router.beforeEach((to, from, next) guard(to, from, next, options))}})afterEach.forEach(guard {if (guard typeof guard function) {router.afterEach((to, from) guard(to, from, options))}})
}export {parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}
5.router中async文件夹中添加router.map文件 里面的内容比较多有需要的可以留个邮箱给我我打包发给你。
6.重点是commonI18n文件在locales文件夹中 common.i18n.js文件中的内容如下
import CN from ./CN;
import US from ./US;
import HK from ./HK;
//多种语言则需要有多个文件用于区分// 全局公共的国际化定义
export default {messages: {CN,US,HK,},
};以CN.js为例
// 全局公共的国际化定义 - CN
export default {user:用户,creator:创建人,orderNo: 订单编号,search:搜索,cancel:取消,CancelEditing:取消编辑,edit:编辑,submit:提交,reset:重置,....
}对应的US.js文件内容如下
// 全局公共的国际化定义 - US
export default {user:User,creator:Creator,orderNo: Order No,search: Search,cancel:Cancel,edit:Edit,CancelEditing:Cancel Editing,submit:Submit,reset:Reset,...
}这个算是国际化的公共文件国际化是就近原则如果是单个页面有单独的i18n文件则会从单独的i18n文件中查找对应的字段没有找不到则会从公共的i18n文件中去查找。
7.以单个文件国际化为例 页面中使用国际化字段的方式$t(xxx)
8.路由的国际化文件需要跟路由配置文件进行匹配其他页面的国际化要跟公共国际化文件的格式保持一致即可。
9.通过以上的步骤菜单页面中静态的文字都可以实现国际化了但是接口返回的数据国际化则需要接口返回不同的文字了。
此时可以在axios请求时则请求头上添加当前的语言类型。
9.1 在axios拦截器文件中的请求部分添加如下的代码 我需要在拦截器.js文件中获取vuex中存储的lang字段的值此时是拿不到vuex中的数据的因为this是undefined
因此需要在main.js文件中添加如下的内容
将vue挂载到window上则其他页面都可以通过window.vm获取到vue了
...window.vm new Vue({router,store,i18n,render: (h) h(App),
}).$mount(#app);拦截器中的写法
const reqCommon {/*** 发送请求之前做些什么* param config axios config* param options 应用配置 包含: {router, i18n, store, message}* returns {*}*/onFulfilled(config, options) {const { message } options;const { url, xsrfCookieName, headers } config;// if (url.indexOf(login) -1 xsrfCookieName !Cookie.get(xsrfCookieName)) {// message.warning(认证 token 已过期请重新登录)// }if (headers.Authorization xsrfCookieName !Cookie.get(xsrfCookieName)) {message.warning(认证 token 已过期请重新登录);}config.headers[Authorization] Cookie.get(xsrfHeaderName);window.vm.$store.commit(setting/setLang,localStorage.getItem(language) || CN);console.log(语言, window.vm.$store.state.setting.lang);config.headers[language] window.vm.$store.state.setting.lang;return config;},.......上面的代码最重要的就是
window.vm.$store.commit(setting/setLang,localStorage.getItem(language) || CN
);
console.log(语言, window.vm.$store.state.setting.lang);
config.headers[language] window.vm.$store.state.setting.lang;为什么要存储到localStorage中因为在切换语言时接口也需要重新请求则也就是说整个页面全部刷新此时最简单的方法就是window.vm.$router.go(0)实现页面的刷新。
页面刷新时vuex中的setting/lang的默认值是CN简体中文为了能够存储上次切换的语言类型可以存储到本地localStorage这样浏览器不关闭的时候这个缓存还是有的。
vuex中的setting文件中的setLang方法也需要改变 setLang(state, lang) {state.lang lang;if (localStorage.getItem(language) ! lang) {window.vm.$router.go(0);}localStorage.setItem(language, lang);console.log(setLang, window.vm.$route);
},完成
