1. 安装组件和插件
cnpm i element-ui -s // 安装element
cnpm i vue-i18n -s //安装i18n
2.将国际化资源放在assets目录下
3.在src下新建i18n目录,创建一个 index.js;路径src\i18n\index.js
import vue from 'vue' import vuei18n from 'vue-i18n' import elementlocale from 'element-ui/lib/locale' import enlocale from 'element-ui/lib/locale/lang/en' import zhlocale from 'element-ui/lib/locale/lang/zh-cn' import langzh from "@/assets/languages/zh.js" import langen from "@/assets/languages/en.js" vue.use(vuei18n) const i18n = new vuei18n({ locale: 'zh', messages: { 'zh': {...langzh,...zhlocale}, 'en': {...langen,...enlocale} } }) elementlocale.i18n((key, value) => i18n.t(key, value)) export default i18n
4.在main.js引用
import i18n from './i18n/index' import locale from 'element-ui/lib/locale/lang/en' vue.use(elementui, { locale }) new vue({ el: '#app', i18n, router, components: { app }, template: '<app/>' })
5.页面中使用$t引用
<el-radio v-model="theme" label="1">{{$t('common.risk')}}</el-radio>
6.切换语言
switchlang(val){ this.$i18n.locale=val; //此处val为 zh 或者 en }
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论