vue-i18n实现vue对语言切换,国际化。

1、安装vue-i18n:

npm install vue-i18n

如果npm长时间无反应,或安装失败,可以换成淘宝镜像安装:

cnpm install vue-i18n

2、在main.js中引用:

import VueI18n from ‘vue-i18n‘

Vue.use(VueI18n)

3、在src下新建语言文件:

src/locale/language/zh.js

src/locale/language/en.js

内容为:

                                en.js

                                zh.js

4、新建一个common组件:

HTML模板:

                               HTML模板

data数据:

                                data数据

6、回到main.js中创建一个i18n的实例,并挂载到vue实例中

                             vue-i18n实力创建并挂载

7、其实到这一步,已经基本差不多了,但是有人会问,为什么在i18n上使用了本地存储,其实这里我是为了实现点击按钮,页面不刷新、且更换语言,不然的话,我们就得手动在代码中控制语言的切换,这样做是不允许的,话不多说,直接放代码。

                                App.vue

                                App.vue

                               common.vue

注:这里利用了element-ui的一些弹窗效果,所以你需先引入element-ui,还有就是这里用到了路由,记得配置一下路由哈,我们来看一下最终效果图:

效果图

如果有什么不懂的,或者大佬们有一些更好的建议以及经验的分享,欢迎在评论区留言。

原文地址:https://www.cnblogs.com/blucesun/p/11442430.html

时间: 2024-10-09 22:56:07

vue-i18n实现vue对语言切换,国际化。的相关文章

17. Vue 使用Element-ui的国际语言插件i18n导致DatePicker日期控件英文错乱

先附上链接,详细请参考:https://blog.csdn.net/github_39532240/article/details/79192780 再来说说我的情况吧,因为项目需要语言的国际化所以就采用了Vue支持的i18n语言国际化,但是当使用了之后发现Element-ui组件的DatePicker日期控件发生英文错乱,如下图所示: 具体原因呢,是出在实现element插件的多语言切换的方法的使用上,如图所示: 之前的写法是上面注释掉的,解决方法呢就是下面那个了.改了之后,抱着忐忑的心情试了

vue i18n 国际化 使用方法

1 先安装 npm install vue-i18n 2  新建文件assets/js/i18n.js 3  引入vue-i18n并注册到vue上 import VueI18n from 'vue-i18n' import Vue from 'vue' Vue.use(VueI18n) let locale = 'zh-CN' // 我这里进行了sessionStoraage配置 // sessionStorage.getItem('vuex') ? sessionStorage.getItem

django 进行语言的国际化及在后台进行中英文切换

项目的部署地为: 中国大陆与美国东海岸, 两个地区的服务器数据不进行同步, 中国地区的服务器页面展示中文, 美国地区的服务器页面展示成英文, 项目后台使用python编程语言进行开发, 并结合django框架进行版本迭代. 这里对项目的国际化进行配置说明: 一.在配置文件settings.py中: 1) 开启国际化功能 # 语言, 先设置成中文 LANGUAGE_CODE = 'zh-hans' # 1.8版本之后的language code设置不同, 1.8之前是LANGUAGE_CODE =

[iOS]如何在iOS开发中切换显示语言实现国际化

1.在Project设置,添加中英两种语言: 2.新建Localizable.strings文件,作为多语言对应的词典,存储多种语言,点击右侧Localization,勾选中英: 3.添加一个字段, 在English中,添加:"SUBMIT_BTN_TITLE" = "Go"; 在Chinese中,添加:"SUBMIT_BTN_TITLE" = "开始"; 4.一个工具类GDLocalizableController,用来切换

iOS 语言切换、本地化,国际化

什么是本地化处理? 本地化处理就是我们的应用程序有可能发布到世界的很多国家去,因为每个国家应用的语言是不一样的,所以我们要把我们的应用程序的语言要进行本地化处理一下. 本地化处理需要处理那些文件? (1):本地化应用程序名称(我的的项目名称) (2):本地化字符串处理(项目中所涉及的字符串) (3):本地化图片 (4):XIB文件本地化处理 (5):其他文件 下面进行本地化处理: 1 . 设置我们的工程支持多语言 为什么:因为只有设置成支持多语言了,我们才能在展示项目名称和项目中的字符串等将语言

Android 应用内多语言切换

p.p1 { margin: 0.0px 0.0px 12.0px 0.0px; line-height: 18.0px; font: 12.0px ".PingFang SC"; color: #000000 } p.p3 { margin: 0.0px 0.0px 13.9px 0.0px; line-height: 18.0px; font: 16.8px "PT Sans"; color: #000000 } p.p4 { margin: 0.0px 0.0

Android应用内语言切换实现

自定义控件系列结束了,打个回马枪,补上前段时间埋下的一个坑---"应用内语言切换".APP语言改变是一个Configuration,但是这个Configuration和android手机屏幕旋转有点不大一样.屏幕旋转的时候,会destroy当前页面,并进行重新绘制.而切换语言后不会重新绘制页面,所以这种情况的出现造成了网上的一知半解小伙伴们哀声一片,不是在咒骂api的坑爹,就是在卖力的另辟蹊径想尽办法解决问题.思路都是很好的,目的也是坚决的,可是方向是错误的,把哥哥我也给带进了坑了,爬

Vue.js起手式+Vue小作品实战

本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用:在最后,我参考SegmentFault上的一篇技博,对Vue进行初入的实战,目的是将新鲜学到的知识立即派上用场:如果你还是前端的小白,相信这篇文章可能会对产生一些帮助和引起思想的碰撞,因为大家的学习历程是相似的,遇到的困惑也有一定的共通性,如果文章出现谬误之处,欢迎各位童鞋

Yii2.0 语言切换的简单设置

多余的话不说,直接看代码: 1) 在 common/config/main.php 写入配置代码 1 // 配置翻译信息 2 'i18n' => [ 3 'translations' => [ 4 'app' => [ 5 'class' => 'yii\i18n\PhpMessageSource', 6 'basePath' => '@common/messages', 7 // 'sourceLanguage' => 'en', 8 'fileMap' =>

实现iOS语言本地化/国际化

实现iOS语言本地化/国际化(图文详解) 前言 语言本地化,又叫做语言国际化.是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言.往往一些应用程序需要提供给多个国家的人群使用,或者一个国家有多种语言,这就要求应用程序所展示的文字.图片等信息,能够让讲不同语言的用户读懂.看懂.进而提出为同一个应用程序适配多种语言,也即是国际化.语言国际化之所以又叫做语言本地化,这是站在每个用户的角度而言的,是指能够让用户本地.本土人群能够看懂的语言信息,顾名思义,语言本地化.其