vue项⽬国际化demo（vue-i18n+element-UI）
项⽬最近有国际化的需求，在⽹上到了很多i18n的例⼦，很简单就实现了，但由于我们的项⽬⽤到了很多element-UI组件，⽐如⽇历、翻页等都需要国际化，因此需要将i18n和elementUI国际化结合，没有到很清楚的两者结合的⽂章，在此以中英⽂为例整理⼀个demo
elementUI本⾝带有国际化功能，不再赘述
第⼀步：install vue-i18n
npm install vue-i18n -save
第⼆步：建⽴lang⽂件夹，存放语⾔包，我将它放在common⽬录下
en.js⽰例：
export const lang = {
username: '请输⼊⽤户名',
password: '请输⼊密码',
systemSetting: '系统配置',
save: '保存',
cancel: '取消'
}
zh.js⽰例：
export const lang = {
username: 'Username',
password: 'Password',
systemSetting: 'System Configurations',
save: 'Save',
cancel: 'Cancel',
}
第三步：main.js引⼊ie18和elementUI的语⾔组件包
import enLocale from 'element-ui/lib/locale/lang/en' // elementUI英⽂包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //elementUI中⽂包
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh', // 语⾔标识
messages: {
'zh': {
message: '你好',
...require('./common/lang/zh'),
...zhLocale
}, // 中⽂语⾔包
'en': {
message: 'hello',
...require('./common/lang/en'),
...enLocale
} // 英⽂语⾔包
}
})
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({
el: '#app',
i18n, // 重要！
router,
store,
render: h => h(App)
})
第四步：代码中使⽤
（1）html模板中的插值使⽤，如：
<el-form-item >
<el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">    {{ $t('lang.login') }}
</el-button>
vue element admin</el-form-item>
（2）script中的使⽤
self.$message({
message: this.$i18n.t('lang.loginOverSize'),
type: 'error'
})
第五步：语⾔切换
⼀般语⾔切换时，仅需修改this.$i18n.locale，⽽我们的项⽬希望⽤户刷新页⾯时也可以保留原来的语⾔选择，因此将⽤户选择的语⾔保存在Cookie中
changeLang(command) {
if (command === 'english') {
this.$i18n.locale = 'en'
Cookies.set('locale', 'en')
} else {
this.$i18n.locale = 'zh'
Cookies.set('locale', 'zh')
}
}
若语⾔选择保存在Cookie中，则main.js做如下修改即可
let locale = 'zh'
const cookieLocale = ('locale')
if (cookieLocale !== null && cookieLocale !== undefined && cookieLocale !== '') {
locale = cookieLocale
}
const i18n = new VueI18n({
locale: locale, // 语⾔标识
messages: {
'zh': {
message: '你好',
...require('./common/lang/zh'),
...zhLocale
}, // 中⽂语⾔包
'en': {
message: 'hello',
...require('./common/lang/en'),
...enLocale
} // 英⽂语⾔包
}
})
以上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。