Vue国际化处理 vue-i18n 以及项目自动切换中英文

wangtdgoodluck 发布于2019-08-26 11:51 / 759人阅读

摘要：直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录，执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件，里面分别存储项目中需要翻译的信息。

0. 直接上预览链接

1. 环境搭建

命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n

npm install vue-i18n --save

2. 项目增加国际化翻译文件

在项目的src下添加lang文件夹增加中文翻译文件（zh_CN.js）以及英文翻译文件（EN.js），里面分别存储项目中需要翻译的信息。

lang文件获取地址

3. 项目引入

在项目的main.js中引入vue-i18n插件，引入对应的翻译文件（zh_CN.js/EN.js）引入并结合Element-UI 国际化。
入下图

4. 项目使用

在中文翻译文件zh_CN中引入Element-UI的中文脚本，在英文翻译文件EN中引入Element-UI的英文脚本，并且在文件中加入要翻译的内容，具体如下：

Zh_CN.js:

EN.js:

然后在要翻译的地方进行翻译。

如果是element-ui 的，在要翻译的前面加上冒号

比如：label=“用户姓名” 就改成 :label=”$t(‘order.userName’)”

如果是html 显示的，就改用以下写法：

直接写成 {{$t(‘order.userName’)}},就会直接去往翻译脚本里面自动匹配。

选择语言之后把记录存在cookie里面。

再次打开浏览器访问项目初始化的时候从cookie里面得到之前选择的语言。

至此整合完毕源码地址

Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

[vue2.0-基于elementui换肤[自定义主题]](https://blog.csdn.net/qq_3234...

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏衷心的表示感谢

GPU云服务器云服务器 vue-i18n js网页中英文切换云服务器搭建vue项目自动定时切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107699.html

vue，使用vue-i18n实现国际化

摘要：需求公司项目需要国际化，点击按钮切换中文英文安装注入实例中，项目中实现调用和模板语法语言标识通过切换的值来实现语言切换中文语言包英文语言包最后对应语言包中文语言包首页概览公司概述财务报表更多附录主要财务指标对比分析新闻事件档案需求公司项目需要国际化，点击按钮切换中文/英文 1、安装 npm install vue-i18n --save 2、注入 vue 实例中，项目中实现调用 ...

jsummer 2019-08-22 16:05 评论0 收藏0
vue-i18n和elementUI实现国际化

摘要：为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...

_ang 2019-08-22 18:14 评论0 收藏0
vue 项目的I18n国际化之路

摘要：国内主要主要三点，一个是港澳台采用中文繁体英文，内陆通俗中文简体，新疆等地区采用文化标准。 I18n (internationalization ) ---未完善产品国际化是产品后期维护及推广中重要的一环，通过国际化操作使得产品能更好适应不同语言和地区的需求国际化重点：1、语言语言本地化2、文化颜色、习俗等3、书写习惯日期格式、时区、数字格式、书写方向备...

2i18ns 2019-08-22 16:06 评论0 收藏0
基于Vue、vue-i18n实现国际化（多语言）

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。 vue-i18n官网 https://kazupon.github.io/vue... 项目用vue-cli构建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 评论0 收藏0
vue中使用国际化基础使用

摘要：方式使用引入要在之后引入使用你好当前语言重新设置中文英文其他当前语言切换语言效果项目中使用安装使用入口文件增加以下代码可以创建文件夹，拆分国际化文件最后引入国际化保存对象你好引用模板当前语言切换语言当前语言重新设置中文英文其他效 cdn方式使用 1.引入 vue-i18n要在vue之后引入 2.使用 js const messages = { zh_CN: { ...

Kosmos 2019-08-26 10:37 评论0 收藏0