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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
JS中Attr的用法详解
Oct 09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
JavaScript实现拖拽效果
Mar 16 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
javascript编程起步(第二课)
2007/02/27 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
实例代码讲解Python 线程池
2020/08/24 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
机关门卫岗位职责
2013/12/30 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
2015年国庆节活动总结
2015/03/23 职场文书