vue使用i18n国际化element

时间：2021-08-05作者：klpeng分类：JS/Shell浏览：212评论：0

首先下载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";
      }
 	},
}

打赏