首先下载i18n
npm install i18n --save
npm i element-ui -S
1.创建i18文件
src目录下创建i8n文件加
├── src
│ ├── i18n
│ │ ├── cn.js
│ │ ├── en.js
│ │ └── index.js
│ ├── i18n.js i
2.i8n相关文件
cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
const cn = {
message: {
navigationBar: {
'icon': '图标',
'navigationBar': '导航栏',
'more': '更多',
},
}
...zhLocale
}
export default cn;
en.js
import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包
const en = {
message: {
navigationBar: {
'icon': 'icon',
'navigationBar': 'navigationBar',
'more': 'more',
},
}
...enLocale
}
export default en;
index.js
import en from './en';
import cn from './cn';
export default {
en: en,
cn: cn
}
i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
//从localStorage获取语言选择。
const i18n = new VueI18n({
locale: localStorage.lang || 'cn', //初始未选择默认 cn 中文
messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
export default i18n
3.引入库
在main.js中导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import i18n from './i18n/i18n';
Vue.use(ElementUI)
new Vue({
router,
store,
i18n,
render: function(h) { return h(App) }
}).$mount('#app')
3.使用方法
<div>{ $t("message.navigationBar.more") }}</div>
<el-dropdown @command="handleCommand" trigger="click">
<span
class="el-dropdown-link"
style="
width: 120px;
display: inline-block;
display: flex;
align-items: center; "
>
<el-dropdown-menu slot="dropdown" class="changeCommand">
<el-dropdown-item
command="cn"
:class="[$i18n.locale == 'cn' ? ' activeli' : '']"
>中文简体</el-dropdown-item
>
<el-dropdown-item
command="en"
:class="[$i18n.locale == 'en' ? ' activeli' : '']"
>English</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
export default {
data() {
return {
lang: window.localStorage.getItem("lang") || "cn",
}
}
}
methods: {
handleCommand(command) {
if (command == "cn") {
window.localStorage.setItem("lang", "cn");
this.lang = "cn";
this.$i18n.locale = "cn";
} else {
window.localStorage.setItem("lang", "en");
this.lang = "en";
this.$i18n.locale = "en";
}
},
}