本项目利用  VueI18n 组件进行国际化,使用之前,需要进行安装

$ npm install vue-i18n

一、框架引入步骤:

1. 先在 main.js 中引入 vue-i18n。

  

// 国际化插件
import utils from '@/config/cookieUtils'
import VueI18n from 'vue-i18n' Vue.use(VueI18n) // 通过插件的形式挂载 let currentLang = utils.get('CurrentLang')
if (currentLang !== 'en-US') {
currentLang = 'zh-CN'
}
const i18n = new VueI18n({
locale: currentLang, // 语言标识
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./lang/zh'), // 中文语言包
'en-US': require('./lang/en') // 英文语言包
}
})

 2.   创建语言包文件

      zh.js  代码:

      

export const m = {
home_page: '首页',
app_center: '应用中心',
document_center: '文档中心',
document: '文档',
plat_des: '平台概述',
API_des: 'API 简介',
front_comp: '前端组件',
ability_comp: '能力组件',
jicheng_center: '集成中心',
common_problem: '常见问题',
api_interface: 'API接口',
manager_controlle: '管理控制台',
service_controlle: '服务治理平台',
more: '更多',
haopingRank: '好评排行',
visitRank: '访问排行',
downloadRank: '下载排行'
}

en.js

export const m = {
home_page: 'Home',
app_center: 'App Center',
document_center: 'Document',
document: 'Document',
plat_des: 'Introduction',
API_des: 'API Introduction',
front_comp: 'Front Component',
ability_comp: 'Ability Component',
jicheng_center: 'Integration Center',
common_problem: 'Normal Problem',
api_interface: 'API Interface',
manager_controlle: 'Control',
service_controlle: 'Service Manage Control',
more: 'More',
haopingRank: 'Ping Rank',
visitRank: 'Visit Rank',
downloadRank: 'Download Rank'
}

 3. 实现语言切换

data () {
return {
lang: utils.get('CurrentLang')
}
},
<a @click="changeLangEvent()" style="float:right; color:#fff;">切换语言</a>
changeLangEvent: function () {
this.$confirm('确定切换语言吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 切换语言
if (this.lang === 'zh-CN') {
this.lang = 'en-US'
} else {
this.lang = 'zh-CN'
}
this.$i18n.locale = this.lang // 关键语句
utils.set('CurrentLang', this.lang)
}).catch(() => {
this.$message({
type: 'info'
})
})
}

4. 接口层面实现多语言,方案为: 在HTTP请求头中携带语言信息,接口服务根据语言,返回不同的语言环境响应体。

    本项目  vue.js 使用了  axios  组件,实现的话就统一在HTTP请求request拦截器中处理,代码如下:

// http request 拦截器
axios.interceptors.request.use(
config => {
// 语言环境设置
let currentLang = utils.get('CurrentLang')
if (currentLang === 'en-US') {
config.headers['X-Client-Language'] = 'en-US'
} else {
config.headers['X-Client-Language'] = 'zh-CN'
}
return config
},
err => {
return Promise.reject(err)
})

  以上几个步骤就实现了前端的国际化框架引入。以下就是需要对每个有文字显示的地方进行处理。

二、文字显示调用方式:

  1.  直接显示

  

        <router-link to="/index">{{$t('m.home_page')}}</router-link>

 2. 绑定方式调用:

<span v-text="$t('m.home_page')"></span>

  3.JS调用字段值

this.$i18n.messages[this.$i18n.locale].m.manual
vm.$i18n.messages[vm.$i18n.locale].m.manual

 

三、Element-UI 组件的国际化

1. 在main.js中引入

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale' 2. 语言包判断
if (currentLang === 'en-US') {
import('../static/css/en.css')
Vue.use(ElementUI, {enLocale})
locale.use(enLocale)
} else {
Vue.use(ElementUI, {zhLocale})
locale.use(zhLocale)
}

  

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化的更多相关文章

  1. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  2. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  3. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  4. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  5. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  6. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  7. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  8. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  9. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  10. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

随机推荐

  1. 基于redis的分布式锁(不适合用于生产环境)

    基于redis的分布式锁 1 介绍 这篇博文讲介绍如何一步步构建一个基于Redis的分布式锁.会从最原始的版本开始,然后根据问题进行调整,最后完成一个较为合理的分布式锁. 本篇文章会将分布式锁的实现分 ...

  2. jquery中找到元素在数组中位置,添加或者删除元素的新方法

    一:查找元素在数组中的位置 jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值.如果数组中不存在该值,则返回 -1. jQuery.inArray( value, array ...

  3. thinkphp——通过在线编辑器添加的内容在模板里正确显示(只显示内容,而不是html代码)

    thinkphp编辑器回显问题如下: 解决办法如下: 对于编辑器发布的内容,前台模板显示为html的解决办法是: 在模板输出字段加入html_entity_decode()函数 也就是:PHP输出时的 ...

  4. angular input 为file on-change 无效

    l转自:https://blog.csdn.net/klo220/article/details/53331229 侵删 出现这个问题是因为input的type是file,这时如果用ng-change ...

  5. js 字符串转数组

    var obj = "123456".replace(/(.)(?=[^$])/g, "$1,").split(",");    conso ...

  6. 2018-05-14 代码考古-Python3官方教程字典例程

    知乎原链 Data Structures中的第一个例程: >>> tel = {'jack': 4098, 'sape': 4139} >>> tel['guido ...

  7. Caused by: Java.lang.NoSuchMethodError: javax.persistence.JoinColumn.foreignKey()Ljavax/persistence/ForeignKey;

    Caused by: Java.lang.NoSuchMethodError: javax.persistence.JoinColumn.foreignKey()Ljavax/persistence/ ...

  8. 26.Odoo产品分析 (三) – 人力资源板块(6) – 工资表(2)

    查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (三) – 人力资源板块(6) – 工资表(1) 4. 缴纳登记册 在"缴纳登记册"菜单中可以查看所有的登记册并新建:  ...

  9. (网页)thinkpad 笔记本开机看看坏了没?

    嗯!只是想看一下是不是块砖头. 出现许多细节问题: 1.不用注册联机的乱七八糟的,验证还慢,直接选择脱机的. 2.推荐密码:zaq!2wsx直接进去,以后可以改. 3.有很多选项都可以不勾选,(只勾选 ...

  10. OneAPM大讲堂 | 提高JavaScript性能的30个技巧

    文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 您是网站管理员还是网页开发人员?想创建超快速的网站吗? 今天我们来看看 JavaScript,这项神奇而又复杂的技术.它使网站内容 ...