vue使用i18n国际化element

首先下载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";
      }
 	},
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值