vue国际化vue-i18n简单使用
时间:2022-07-24
本文章向大家介绍vue国际化vue-i18n简单使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前一直想做个国际化、在线换肤和拖拉拽生成网页的demo,或者说实现思路。拖拉拽生成网页一直没什么思路,今天先实现国际化。当然是直接用插件了,并不是自己实现
vue-i18n使用很简单:
安装依赖:npm i vue-i18n -S
引入、调用:
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
生成实例:
const i18n = new VueI18n({
locale: 'zh',
messages: {
'zh': require('@/assets/lang/zh.js'),
'en': require('@/assets/lang/en.js')
}
});
locale默认采用messages里面的哪个语言,js里面内容:
en.js:
export const lang = {
login: 'login',
register: 'register',
rember: 'rember',
home: 'home',
about: 'about',
aboutDesc: 'This is an about page'
}
zh.js:
export const lang = {
login: '登录',
register: '注册',
rember: '记住密码',
home: '首页',
about: '关于',
aboutDesc: '这是关于页面'
}
跟store一样,把实例传给vue:
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
内部会把i18n通过mixin合并到vue实例上,新加属性i18n、t等属性方法。
直接使用:
{{$t('lang.login')}}
切换语言:
this.$i18n.locale = type;
效果:
实现起来很简单,你可以打印$t看看,其实就是一个方法,返回对应的内容:
难的是内容对应的zh.js和en.js,更别说其他语言了。当然,vue-i18n还提供了其他属性和方法,只是官网我打不开,没办法多说一些。
element-ui也是通过切换语言文件实现的。只是更复杂,可以去稍微看一下内容,是真的可怕,那么多内容都要翻译和一一对应:
另外就是如果要切换过程页面整体布局不会很明显,对每一个内容高度宽度要稍微注意一下,毕竟不同语言宽高比例不一样。至于vue官网的,我看见是直接地址都变了,也不知道是不是采用这种思路,直接替换文本内容。
(完)
- 全球15%工作将被自动化,中国1亿人将面临失业
- ASP.NET MVC的Model元数据提供机制的实现
- 清官难断家务事,人工智能却来介入家庭伦理大戏
- 使用Symfony的Console组件构建命令行程序
- 微软编程教育都在搞什么?从code.org到makecode,从Minecraft到Micro:bit
- 谷歌:通往完全自动驾驶之路
- 随时随地部署Kubernetes
- 使用CoreOs,Docker和Nirmata来部署微服务风格的应用程序
- 使用ACS和Kubernetes部署Red Hat JBoss Fuse
- 教你快速安装OpenShift容器平台3.6
- 面向开发者的Cloud Foundry
- 云数据库安全与农场和餐馆:知道来源的重要性
- 云数据库安全,农场和餐馆:知道你的来源的重要性
- NO.32 不堪重负:线程池拒绝策略
- 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 数组属性和方法
- 使用纯CSS给网站文章中的外链添加小图标
- iOS美团同款"ZSource"二进制调试实现
- 使用picocm来进行Linux下的串口调试
- vue-drawer-layout实现手势滑出菜单栏
- iOS面试之UI大全
- 基于Ant Design Vue封装一个表单控件
- Rust闭包的虫洞穿梭
- TS 设计模式08 - 发布订阅模式
- GrowingIO 数据采集 iOS SDK 测试实践
- Kubernetes 1.19.0——Pod(2)
- 极速40分钟写出SQLite数据展示与导出功能【技术创作101训练营】
- opencv cudacodec VideoReader 报错
- Flutter中富文件标签的解决方案
- JDK 15已发布,你所要知道的都在这里!
- [Concent速成] (1) 定义和共享模块状态