热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue.js前端框架中使用vuei18n实现多语言支持的详细指南

本文详细介绍了在Vue.js前端框架中集成vue-i18n插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code
 
 

一、前言

  趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。

  在这就不谈原理,只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。

二、demo 场景需求分析

技术分享图片

需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本。

技术分享图片

切换成英文版本:

技术分享图片

三、实现国际化

  首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上 github 传送门。

1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架 demo ,有助于你快速的进行 vue 模块化开发。

2、我们需要安装 vue-i18n, 推荐 npm 包依赖:

$ npm install vue-i18n

当然你也可以这样:

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

3、注入 vue 实例中,项目中实现调用 api 和 模板语法

这边我是顺着使用 npm 安装依赖进行。先在 main.js 中引入 vue-i18n。

import VueI18n from ‘vue-i18n‘

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: ‘zh-CN‘,    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      ‘zh-CN‘: require(‘./common/lang/zh‘),   // 中文语言包
      ‘en-US‘: require(‘./common/lang/en‘)    // 英文语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  i18n,  // 不要忘记
  store,
  router,
  template: ‘‘,
  components: { App }
})

上面的代码正式将 vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象,方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换,同样的我这边的例子里就是通过点击事件,点击‘’网易云音乐‘’,来触发事件,切换locale 的值。

4、ok, 引入的事情就是这样,那么既然实现国际化,这边简单的是中英文切换,那么自然我们需要中英文两套语言的文件,vue-i18n中相对简单,只需要两个 js 文件,通过 require 的形式引入到 main.js。

技术分享图片

en.js 英文语言包:

export const m = { 
  music: ‘Music‘,//网易云音乐
  findMusic: ‘FIND MUSIC‘,//发现音乐
  myMusic: ‘MY MUSIC‘,//我的音乐
  friend: ‘FRIEND‘,//朋友
  musician: ‘MUSICIAN‘,//音乐人
  download: ‘DOWNLOAD‘//下载客户端
}

zh.js中文语言包:

export const m = {
  music: ‘网易云音乐‘,
  findMusic: ‘发现音乐‘,
  myMusic: ‘我的音乐‘,
  friend: ‘朋友‘,
  musician: ‘音乐人‘,
  download: ‘下载客户端‘
}

最后我们只需要通过触发事件的形式,来控制 locale 的值,去调用对应的语言包就可以实现国际化啦。

5、组件中如何去切换 locale 的值,实现语言切换。

locale: ‘zh-CN‘,    // 语言标识
    messages: {
      ‘zh-CN‘: require(‘./common/lang/zh‘),   // 中文语言包
      ‘en-US‘: require(‘./common/lang/en‘)    // 英文语言包
    }

在 main.js 中的代码中,可以看到,当 locale 的值为‘zh-CN’时,版本为中文;当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en,这个不固定,只需要对应上。

好了,现在来看一下,我组件中的一个点击事件中如何进行切换。

/**
 * 切换语言 
 */ 
 changeLangEvent() {
   this.$confirm(‘确定切换语言吗?‘, ‘提示‘, {
       confirmButtonText: ‘确定‘,
       cancelButtonText: ‘取消‘,
       type: ‘warning‘
    }).then(() => {
       if ( this.lang === ‘zh-CN‘ ) {
          this.lang = ‘en-US‘;
          this.$i18n.locale = this.lang;//关键语句
       }else {
          this.lang = ‘zh-CN‘;
          this.$i18n.locale = this.lang;//关键语句
       }
    }).catch(() => {
       this.$message({
           type: ‘info‘,
       });          
    });
}

这边的重点就是,点出的‘’关键语句‘’:this.$i18n.locale,当你赋值为‘zh-CN’时,导航栏就变成中文;当赋值为 ‘en-US’时,就变成英文。效果图就是文章前面的样子。

6、到这,前端 vue-i18n 国际化插件在 vue-cli 模块化环境中的开发实践就全部完成了。

四、vue-i18n 数据渲染的模板语法

我们知道 vue 中对于文字数据的渲染,有以‘’{{}}‘’或者 v-text、v-html等的形式,同样的使用国际化后,依旧可以沿用,但需要一点修改。 
v-text:

{{}}:

{{$t(‘m.music‘)}}

五、vue-cli 、vue-i18n 开发练手项目地址

项目开源在 github 上,文档较完善,可以尝试练手,如果你觉得还可以,感谢能给一个 star 。

如果 ,在 vue 开发中遇到相关问题,也可以在下面留言,我会不定时尝试帮你解答。同样之前也写过一些在开发中解决的方案,可以看往期的博客,一个在路上的前端小白,欢迎指正。

 
 
 
 
 
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code
 

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化


推荐阅读
  • 2019-2020学年 20174325 叶竞蔚 《网络对抗技术》实验六:Metasploit基础应用
    本实验旨在掌握Metasploit框架的基本应用方法,重点学习三种常见的攻击方式及其实施思路。实验内容包括一次主动攻击(如MS08-067)、一次针对浏览器的攻击(如MS11-050)以及一次针对客户端的攻击(如Adobe漏洞利用)。此外,还包括成功应用一个辅助模块。 ... [详细]
  • 本文详细介绍了如何在 Ubuntu 14.04 系统上搭建仅使用 CPU 的 Caffe 深度学习框架,包括环境准备、依赖安装及编译过程。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • ArcBlock 发布 ABT 节点 1.0.31 版本更新
    2020年11月9日,ArcBlock 区块链基础平台发布了 ABT 节点开发平台的1.0.31版本更新,此次更新带来了多项功能增强与性能优化。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件(model.py)。此方法适用于需要快速搭建项目模型层的情况。 ... [详细]
  • 在尝试加载支持推送通知的iOS应用程序的Ad Hoc构建时,遇到了‘no valid aps-environment entitlement found for application’的错误提示。本文将探讨此错误的原因及多种可能的解决方案。 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 如何高效解决Android应用ANR问题?
    本文介绍了ANR(应用程序无响应)的基本概念、常见原因及其解决方案,并提供了实用的工具和技巧帮助开发者快速定位和解决ANR问题,提高应用的用户体验。 ... [详细]
  • 说明Python教程正在编写中,欢迎大家加微信sinbam提供意见、建议、纠错、催更。drymail是一个邮件发送库,封装了Python的smtplib ... [详细]
  • 任务通知是 FreeRTOS 中的一个可选功能,需要通过配置宏 `#define configUSE_TASK_NOTIFICATIONS 1` 来启用。每个任务控制块 (TCB) 都包含一个32位的通知值,用于任务间的同步和通信。 ... [详细]
author-avatar
如虎添一2012
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有