vue中使用Vue-i18n插件实现页面中英文切换详细教程

1、在项目的根目录中安装插件 npm install vue-i18n
2、新建文件夹与文件存放自己配置的语言包，我这里新建的是lang文件夹
zh.js为中文语言包 en.js为英文语言包文件夹与文件可以随便命名，但在引用的时候需要写自己新建的文件夹与文件，如图所示

3、入口文件main.js中引入并安装和配置该插件

import VueI18n from 'vue-i18n' //引入
Vue.use(VueI18n) //安装
const i18n =new VueI18n({locale:'zh-CN' ,//定义为默认中文messages:{'zh':require('./lang/zh') ,//中文语言包'en-US':require('./lang/en') //英文语言包}
})

4、在 zh.js中配置某些变量对应的中文名称，在en.js中配置变量对应的英文名称
注意同一个名称的字段在zh.js与en.js中声明的变量应一样例
zh.js中

//中文包  导出的变量 x 可以随便命名 建议简短一点（这样在页面中使用的时候就少写一点代码）
export const x = { queren:'确认',jianjie:'简介'
}

en.js中

//英文包
export const x = {queren:'confirm',//确认jianjie:'Introduction',//简介
}

页面中使用如下语法
HTML

<el-button>{{$t('m.confirm')}}</el-button>
<-- 绑定动态变量使用方式如下 -->
<el-input type="password"  :placeholder="$t('m.jianjie')"></el-input>

用户点击切换语言时执行如下代码
HTML

<-- element组件中的下拉框选择  不知道的老铁可以去element官网看一下-->
<-- command 点击菜单项触发的事件回调 -->
<-- 自己手写下拉框的老铁 js实现的原理都差不多，根据用户选择的语言来切换语言包 -->
<el-dropdown trigger="click" @command="cut"><span class="el-dropdown-link">{{language}}<i class="el-icon-caret-bottom"></i></span><el-dropdown-menu slot="dropdown" ><el-dropdown-item command="English">English</el-dropdown-item> <el-dropdown-item command='中文'>中文</el-dropdown-item></el-dropdown-menu>
</el-dropdown>

下拉框效果图如下

JS

data(){return {language:'中文'}
}
//用户点击选择的语言
cut(event){if (event == "English") { //英文this.language=eventthis.$i18n.locale = 'en-US'; //关键语句} else if(event=='中文'){ //中文this.language=eventthis.$i18n.locale = 'zh-CN'; //关键语句}//下面这一步可以不用 因为我的项目中需要对一些页面进行特殊处理，//所以要读取当前用户选择的是什么语言this.$store.commit('$_language',event) //同步到状态管理中
},

到这里就大功告成了，没有理解到的老铁可以下方评论，我会第一时间回应的

vue中使用Vue-i18n插件实现页面中英文切换详细教程相关推荐

vue spa php,在Vue中有关SPA首屏加载优化（详细教程）
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
i18n国际化（页面中英文切换）
1.基于jquery,先引入jQuery 2.引入jquery.i18n.js(这个源码应该不完全,但是能用) (function ($) {$.fn.extend({i18n: function ( ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
linux python2.7安装教程_Linux中RedHat下安装Python2.7开发环境的详细教程-学派吧-
这篇文章主要为大家详细介绍了Linux RedHat下安装Python2.7.pip.ipython环境.eclipse和PyDev环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Linux ...
The Tips - F12开发者页面中英文切换
文章目录 F12开发者页面中英文切换直接按F12-设置 F12开发者页面中英文切换直接按F12-设置首选项 - 语言(匹配语言) 转换英文成功 - 同时设置了主题为酷黑主题,还是刚才那个页面

vue中使用Vue-i18n插件实现页面中英文切换详细教程

vue中使用Vue-i18n插件实现页面中英文切换详细教程相关推荐

最新文章

热门文章