# 一、概述
vue-i18n是一个 Vue.js 的国际化插件,主要作用就是让项目支持国际化多语言。在很多网站中都可以看到它的身影,它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。接下来,我会介绍如何在Vue+ElementUI中集成环境中使用vue-i18n
最终的效果如下:
项目的基本结构如下:
├─public
│ favicon.ico
│ index.html
└─src
│ App.vue
│ main.js
├─components
│ Aside.vue
│ CommonHeader.vue
├─lang
│ en.js
│ index.js
│ zh.js
├─router
│ index.js
├─store
│ index.js
└─views
Home.vue
GitHub完整代码:https://github.com/shitudouya/vue-i18n_demo
# 二、安装和配置
npm i vue-i18n js-cookie element-ui -S
引入js-cookie
的目的是为了将当前选择的语言配置在cookie中,当页面刷新时从cookie中获取选中的语言,这样可以防止页面刷新后无法记住当前选中的语言,当然也可以使用localStorage或sessionStorage保存状态信息。
接着,在src目录下新建lang
文件夹,在该文件夹下新建三个子文件,分别是index.js(主入口)
,en.js(英文配置文件)
,zh.js(中文配置文件)
,代码如下:
//zh.js
export default {
header: {
home: "首页",
lang: "切换语言"
},
aside: {
home: "首页",
pageOne: "页面一",
pageTwo: "页面二",
manage: "文章管理",
center: "个人中心"
}
};
//en.js
export default {
header: {
home: "Home",
lang: "Switch Language"
},
aside: {
home: "Home",
pageOne: "Page-One",
pageTwo: "Page-Two",
manage: "Article Management",
center: "Personal Center"
}
};
//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
//element-ui需要进行多语言设置 详情:https://element.eleme.cn/#/zh-CN/component/i18n
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
//引入自定义配置的语言文件
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
const messages = {
en:{
...enLocale,
...elementEnLocale
},
zh:{
...zhLocale,
...elementZhLocale
}
}
const i18n = new VueI18n({
//从cookie中获取保存的语言信息,如果不存在默认用中文显示语言
locale: Cookies.get('language')||'zh',
messages
})
export default i18n
在main.js
配置如下:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import i18n from "./lang/index";
//element-ui默认不支持 6.x 的 vue-i18n,需要手动处理。
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
});
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n, // 便于可以直接在组件中通过this.$i18n使用
render: (h) => h(App)
}).$mount("#app");
之后我们就可以在vue的组件里使用i18n了,使用方法主要是两种:
在组件的template中,调用$t()
方法,或者在组件的script中,调用this.$i18n.t()
方法
<el-menu-item-group>
<el-menu-item index="1-1"> {{ $t("aside.pageOne") }}</el-menu-item>
<el-menu-item index="1-2">{{ $t("aside.pageTwo") }}</el-menu-item>
</el-menu-item-group>
最后一步是实现语言的切换功能,我们可以借助element-ui中的Dropdown 下拉菜单实现这个功能,代码如下:
<!-- template -->
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ $t("header.lang") }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh">中文</el-dropdown-item>
<el-dropdown-item command="en">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
//script
import Cookies from "js-cookie";
export default {
data() {
return {};
},
methods: {
handleCommand(command) {
this.$i18n.locale = command;
Cookies.set("language", command);
}
}
};
最后,还有一些element-ui基本布局什么的,没有在这篇文章详细说明,大家可以参考完整的源码,已经放在GitHub上了,顶部有说明哦