vue + element

#vue + element| 来源: 网络整理| 查看: 265

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: '' })

5.页面中使用$t引用 6.切换语言

switchLang() { console.log(this.$i18n.locale); if (this.$i18n.locale === "zh") { this.$i18n.locale = "en"; } else { this.$i18n.locale = "zh"; } // this.$i18n.locale = val; //此处val为 zh 或者 en },

效果：

【本文地址】

公司简介

联系我们