Vue国际化处理 vue-i18n 以及项目自动切换中英文
来源:互联网 发布:办公软件培训多少钱 编辑:程序博客网 时间:2024/06/03 16:06
1. 环境搭建
命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n
Npm install vue-i18n --save
2. 项目增加国际化翻译文件
在项目的src/common/lang增加中文翻译文件(zh_CN.js)以及英文翻译文件(EN.js),里面分别存储项目中需要翻译的信息。
3. 项目引入
在项目的main.js中引入vue-i18n插件,引入对应的翻译文件(zh_CN.js/EN.js)引入并结合Element-UI 国际化。
上面有AppLanguage方法,可以传入 zh 或者 en,自动切换项目语言,可以在其他组件中直接调用。调用是直接写上 AppLanguage('zh');
4. 项目使用
在中文翻译文件zh_CN中引入Element-UI的中文脚本,在英文翻译文件EN中引入Element-UI的英文脚本,并且在文件中加入要翻译的内容,具体如下:
Zh_CN.js:
EN.js:
然后在要翻译的地方进行翻译。
如果是element-ui 的,在要翻译的前面加上冒号
比如:label=“用户姓名” 就改成 :label=”$t(‘order.userName’)”
如果是html 显示的,就该用以下写法:
直接写成 {{$t(‘export’)}},就会直接去往翻译脚本里面自动匹配。
阅读全文
4 0
- Vue国际化处理 vue-i18n 以及项目自动切换中英文
- Vue + i18n实现国际化
- vue前端国际化方案之vue-i18n
- 前端框架Vue(16)——vue-i18n ,vue项目中如何实现国际化
- python国际化(i18n)和中英文切换
- python国际化(i18n)和中英文切换
- vue.js国际化 vue-i18n插件的使用
- vue-i18n 实现多语言切换
- 前端国际化,用jquery.i18n完成中英文切换
- I18n实现中英文切换
- vue实现自动切换tab
- vue-i18n学习-01
- vue与vue-i18n结合实现后台数据的多语言切换
- Struts2 关于i18n国际化的问题,可点击链接实现中英文切换
- Struts2 关于i18n国际化的问题,可点击链接实现中英文切换
- 国际化 中英文 切换
- SpringMVC 国际化-中英文切换
- vue项目搭建(vue-cli)以及其他配置
- git常用命令
- The content of the adapter has changed but ListView did not receive a notification.
- c++版本的高斯混合模型的源代码完全注释
- jqgrid实现字段显示或隐藏问题
- Android源码(10) --- Binder(4) ServiceManager 启动
- Vue国际化处理 vue-i18n 以及项目自动切换中英文
- Java 容器与并发
- 算法竞赛入门经典习题3-5
- 【读书笔记】TCP/IP网络编程 第7章 半关闭
- 前端基础面试题
- 详解java定时任务
- hdu 6090 Rikka with Graph [想法题]
- 试题信息管理系统java
- 大流量高并发网站解决问题