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 相关文章推荐
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
详解Vue方法与事件
Mar 09 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
JS中队列和双端队列实现及应用详解
Sep 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
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
js实现简单的秒表
2020/01/16 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
使用python爬取B站千万级数据
2018/06/08 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
python logging模块的使用
2020/09/07 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
公司委托书格式范文
2014/10/09 职场文书
自荐信模板大全
2015/03/27 职场文书
公积金贷款承诺书
2015/04/30 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL