vue项目国际化vue-i18n的安装使用教程


Posted in Javascript onMarch 14, 2018

前言

项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示。

发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码。下面话不多说了,来一起看看详细的介绍吧。

安装

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

一般一个项目中使用都是通过安装包的方式去运行的, script 引入的较少。

使用

项目中配置i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: 'cn', // 设置语言 
  messages // 语言包
})

new Vue({
  el: '#app',
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: '名字'
  },
  us: {
    name: 'Name'
  }
}

使用i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

还有一些其他的用法,如:

  • 针对不同语言,显示不同的格式
  • 如果在传入自定义变量来控制显示
  • ... 具体的请参考官方文档。

切换语言的话,可以使用内置变量:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

语言包的生成 & 替换项目中原有的静态文本

这一步最关键,抽离出所有出现的汉字,替换成 $t('xxx') ,维护多个版本的语言文件

语言包这边是这么处理的,项目下新增一个目录languages

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言,暂未实践
  -- index.js // 导出语言包

cn.js

export default {
  common: {
    message: '消息'
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: 'Messages'
  },
  xxx: {
  }
}

index.js

import cn from './lib/cn.js'
export default {
  cn,
  us
}

替换文本

<template>
  ...
  <div>{{$t('message')}}</div>
  ...
</template>

问题

  • 不同的语言,格式不同,长度不同,可能需要调整项目的样式,以保正常
  • 对于一个已经在使用的项目,生成语言包这一步工作量大,浪费时间
  • 没有考虑如果是否需要动态的加载语言包,而非初始的加载所有的语言包

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 #Javascript
vue2.0模拟锚点的实例
Mar 14 #Javascript
vue的mixins属性详解
Mar 14 #Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
create-react-app构建项目慢的解决方法
Mar 14 #Javascript
You might like
Look And Say 序列php实现代码
2011/05/22 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python反射用法实例简析
2017/12/22 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python 爬虫的原理
2020/07/30 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
个人培训总结
2015/03/05 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js