vue-i18n和ElementUI多语言使用

原创 大喵 教程 vue 113阅读 2018-08-16 17:54:17 举报

vue.js项目,使用ElementUI,结合vue-i18n进行语言切换

第一步、安装

安装element-ui和vue-i18n
npm install element-ui
npm install vue-i18n
引入js-cookie的cdn"https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js";

第二步、起步准备


创建文件夹lang
index.js用于配置
en.js,zh.js用于中英文字段匹配

第三步、配置index.js

  1. 引入vue-i18n


2.引入js-cookie,创建i18n对象

cookie语言

3.引入中文与英文对应的js,赋给message

4.按需加载

5.最后在结尾处加上i18n

第四步、配置en.js,zh.js

en.js

zh.js同上配置

第五步、在页面使用语言包

在你需要转换语言的页面的index.js文件中引入语言包

使用展示

最后、展示结果

英文效果

中文效果

为了大家方便测试使用在下面附上源码
lang下的index.js

en.js

zh.js

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复