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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
React简单介绍
May 24 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript中length属性的探索
2011/07/31 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Django的models模型的具体使用
2019/07/15 Python
Python实现密码薄文件读写操作
2019/12/16 Python
如何用Python徒手写线性回归
2021/01/25 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
六年级数学教学反思
2014/02/03 职场文书
社区维稳工作方案
2014/06/06 职场文书
中药学自荐信
2014/06/15 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
anaconda python3.8安装后降级
2021/06/11 Python