使用vue-i18n实现多语言
来源:互联网 发布:编程来回打括号好烦 编辑:程序博客网 时间:2024/05/16 07:25
- 前言
- 1 需求
- 2 vue-i18n插件
- 3 兼容性
- 实战
- 1 安装
- 2 工程中使用
- 1 在mainjs中引入vue-i18n
- 2 语言资源
- 3 VueI18n实例
- 4 挂载到Vue的实例上
- 5 标记在HTML中
- 3 功能进阶
- 1 动态切换语言
- 2 语言包
- 1 资源文件
- 2 mainjs中引入
1. 前言
(1) 需求
Vue工程,需要实现多语言切换功能。
(2) vue-i18n插件
npm中对vue-i18n的描述及文档
Internationalization plugin for Vue.js
https://www.npmjs.com/package/vue-i18n
我们将使用这个插件实现多语言。
(3) 兼容性
支持Vue.js 2.x以上版本
2. 实战
(1) 安装
npm install vue-i18n
(2) 工程中使用
[1] 在main.js中引入vue-i18n
import VueI18n from 'vue-i18n'Vue.use(VueI18n)
[2] 语言资源
const messages = { //英文 en: { message: { hello: 'hello', about: 'about' } }, //简体中文 zhCHS: { message: { hello: '你好', about: '关于' } }, //繁体中文 zhCHT: { message: { hello: '妳好', about: '關於' } }
[3] VueI18n实例
const i18n = new VueI18n({ //定义默认语言 locale: 'en', messages})
[4] 挂载到Vue的实例上
new Vue({ el: '#app', router, i18n, //<==== template: '<App/>', components: { App }})
[5] 标记在HTML中
注意:这里是$t
h3 {{ $t("message.hello") }}
完成上述功能后,我们运行,可以看到内容显示为hello
,修改上述第三步的locale
为zhCHS
后运行,可以看到页面变为了你好
。
(3) 功能进阶
[1] 动态切换语言
实际项目中,往往需要动态切换语言,比如当用户点击了其需要的语言。
vue-i18n 提供了一个全局配置参数叫 “locale”,通过改变 locale 的值可以实现不同语言的切换。
在页面中只需要在切换时,修改this.$i18n.locale
的值即可。
this.$i18n.locale='zhCHS'
[2] 语言包
实际开发中,语言资源会很多,通常会单独作为语言包的文件放置在工程中。
1) 资源文件
在根目录下的static文件夹中新建lang文件夹,作为语言包。
将不同语言保存成json对象,完成3个js如下。
//en.jsmodule.exports={ message: { hello: 'hello', about: 'about' }}
//zhCHS.jsmodule.exports={ message: { hello: '你好', about: '关于' }}
//zhCHT.jsmodule.exports={ message: { hello: '妳好', about: '關於' }}
2) main.js中引入
import LangEn from '../static/lang/en'import LangZhCHS from '../static/lang/zhCHS'import LangZhCHT from '../static/lang/zhCHT'const i18n = new VueI18n({ locale: 'en', messages:{ 'en': LangEn, 'zhCHS': LangZhCHS, 'zhCHT': LangZhCHT }})
阅读全文
0 0
- 使用vue-i18n实现多语言
- vue-i18n 实现多语言切换
- vue与vue-i18n结合实现后台数据的多语言切换
- Vue + i18n实现国际化
- php i18n gettext 实现多语言
- 在CakePHP 1.2 中实现多语言支持——i18n 和 L10n 的使用简述
- springMVC-多语言I18n
- vue.js国际化 vue-i18n插件的使用
- php gettext方式实现UTF-8国际化多语言(i18n)
- php 通过include方式实现国际化多语言(i18n)
- php gettext方式实现UTF-8国际化多语言(i18n)
- php gettext方式实现UTF-8国际化多语言(i18n)
- php 通过include方式实现国际化多语言(i18n)
- php gettext方式实现UTF-8国际化多语言(i18n)
- 使用i18n实现页面国际化
- 【AngularJs】使用angular-cli实现多国语言i18n
- 前端框架Vue(16)——vue-i18n ,vue项目中如何实现国际化
- django的i18n,强制使用某种语言
- a 链接的 download 属性实操
- Hystrix文档-实现原理
- Java生成验证码
- mongodb笔记01(更新删除文档)
- webservice传输文件
- 使用vue-i18n实现多语言
- 打印机编程手册命令原理解析
- Thinking in Java:第九章-接口
- Bentley.PULS.XM.V8.9.0.28 数字管道脉动分析
- 对5种主流编程语言的吐槽
- QCustomPlot使用手册
- 微信小程序基础知识笔记
- UUID.randomUUID().toString()()够造随机UUID
- Unity 导出 Gradle 工程及问题 (Please select a keystore and a signing key!)