Ant-design-vue+vue-i18n实现前端国际化
项目基于Vue-cli3.x进行开发,使用了ant-design-vue框架,然后需要做国际化。此时做国际化需要考虑两方面的国际化,一是ant-design-vue内部组件的国际化,二是国际化我们的业务显示,业务显示我们选用vue-i18n进行国际化。
安装vue-i18n
yarn add vue-i18n
在public文件夹下新建languages文件夹,在新建langs文件夹和i18n.js,langs文件夹下新建index.js、cn.js、en.js。
i18n.js文件内容如下:
langs下index.js内容如下:
langs下cn.js内容如下(en.js文件和cn格式一样):
在main.js中导入语言包
比较基础的配置我们已经配置好了,接下来我们写切换多语言功能,在src下的app.vue文件中引入多语言文件和我们写切换的方法:
created内容如下:
created() {
// 默认中文
localStorage.lang == undefined ? localStorage.setItem("lang", "cn") : "";
// 自己配置多语言适配
this.$root.Bus.$on("switchLanguage", value => {
let router_path = this.$route.path;
switch (value) {
case "cn":
localStorage.setItem("lang", "cn");
break;
case "en":
localStorage.setItem("lang", "en");
break;
}
// 刷新页面
this.isRouterAlive = false; //先关闭,
this.$nextTick(function() {
this.isRouterAlive = true; //再打开
});
// 系统组件适配
let lang = localStorage.lang;
if (lang == "cn") {
this.locale = cn;
moment.locale("cn");
} else if (lang == "en") {
this.locale = en;
moment.locale("en");
}
});
},
上面这个方法可以简单理解就是我们在这里定义了一个方法,在别的组件我们只要调用这个方法就可以切换多语言。调用方法如下:
this.$root.Bus.$emit("switchLanguage", "cn/en");
解释下this.$root.Bus.$on(),这个是组件传值的一种方式,需要在main.js中配置,
moment.locale("cn");这个是ant-design-vue内部组件的国际化切换方法。
页面适配多语言分为view中使用和js中
view中我们用
:label="$t('logistics.search')"
或者
{{$t('logistics.search')}}
js中我们用
this.$t("logistics.search")
简单测试下切换多语言,在login.vue(你可以是任意组件中)写调用方法
显示效果
多语言适配完成,但是,如果我们系统文字多,那一个文件会很大,加载很慢,对用户不友好,那我们优化下,一个vue组件我们对一个json多语言文件,按需加载
这里我们用到了vue的mixin,src下新建mixins文件夹,新建一个utils.js文件,内容格式如下:
/**
* 引入语言包
* @param path
*/
importFontpack(path) {
let _nowMsg = require('@/languages/' + path + localStorage.lang + '.json');
this.$i18n.mergeLocaleMessage(localStorage.lang, _nowMsg);
this.$i18n.locale = localStorage.lang
},
src下新建languages文件夹,下面分模块
页面切换多语言
这样就完成了Ant-design-vue + vue-i18n实现前端国际化。
获取更多优质内容,请关注【青年码农】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 谈谈类加载器
- Android中AlarmManager+Notification实现定时通知提醒功能
- Java垃圾回收相关面试题
- Android中backgroundDimEnabled的作用
- 甲基化相关的习题背景补充
- Android 完全退出的实例详解
- Android 双击Back键退出应用的实现方法
- 2020最全Java面试题--基础篇
- Android开发之背景动画简单实现方法
- 15.深入k8s:Event事件处理及其源码分析
- 说一说 HashMap 底层数据结构
- 详解Android Service 使用时的注意事项
- Android自定义View实现QQ运动积分转盘抽奖功能
- 请简述Spring JDBC是如何进行配置的
- Java高频面试题 -- 静态