当前位置：首页 > news >正文

3.Vue2结合element-ui实现国际化多语言i18n

news 2025/7/14 19:27:23

1.安装vue-i18n

npm install vue-i18n@8.2.1

说明：Vue2使用vue-i18n是8.x，Vue3使用的版本是9.x以上，使用错了会导致报错

2.创建多语言文件

在src/下创建src/lang/langs/zh.js和src/lang/langs/en.js两个文件，里面内容如下：
src/lang/langs/zh.js

export const zh = {'common': {'button': {'search': '搜索'}
}export default zh

src/lang/langs/en.js

export const en = {'common': {'button': {'search': 'Search'}
}export default en

3.创建i18n

在在src/下创建src/lang/i18n.js文件，如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'Vue.use(VueI18n)const messages = {en: en,zh: zh
}const i18n = new VueI18n({locale: 'zh',messages,globalInjection: true
})export default i18n

4.引入i18n

在main.js中加入下面代码

import i18n from './lang/i18n'new Vue({i18n,render: h => h(App)
})

5.在组件中使用

5.1.Html中使用

<div>{{ $t('common.button.search') }}</div>

5.2.在html作为变量使用

<input :placeholder="$t('common.button.search')"/>

5.3.在props使用

export default {props: {name: String,default() {return this.$t('common.button.search')}}
}

5.4.在script的方法使用

this.$t('common.button.search')

6.Element-UI使用i18n

6.1.引入element-ui的多语言

在src/lang/i18n.js文件内添加

import elementEN from 'element-ui/lib/locale/lang/en'
import elementZH from 'element-ui/lib/locale/lang/zh-CN'const messages = {en: {...en,...elementEN},zh: {...zh,...elementZH}
}

6.2.引用element-ui的多语言

在src/main.js中添加

Vue.use(Element, {size: Cookies.get('size') || 'small',i18n: (key, value) => i18n.t(key, value)
})

7.实时切换多语言

在切换多语言的时候，调用下面方法

changeLang(lang) {this.$i18n.locale = langlocalStorage.setItem('el_local_lang', lang)
}

并且在src/lang/i18n.js文件中，优先从localStorage获取当前语言

const i18n = new VueI18n({locale: localStorage.getItem('el_local_lang') ? localStorage.getItem('el_local_lang') : 'zh',messages,globalInjection: true
})