vue-i18n 国际化语言切换
1.安装vue-i8n
npm install vue-i18n --save
2.src目录下创建文件夹 i18n
—— src
|
—— i18n
|———— langs
|—————— cn.js
|—————— en.js
|—————— index.js
|———— i18n.js
3. cn.js
import enLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
login: {
'btn': '登录'
},
...enLocale
}
export default cn
4. en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
login: {
'btn': 'Login'
},
...enLocale
}
export default en
5. index.js
import en from './en' // 英语
import cn from './cn' // 中文
export default {
en: en,
cn: cn
}
6. 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)
const i18n = new VueI18n({
locale: localStorage.lang || 'cn',
messages
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n
7. src下main.js
import i18n from './i18n/i18n'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
示例
<!-- i18n -->
<template>
<div>
<span>{{$t('login.btn')}}</span>
<el-select v-model="selectValue" @change="langChange" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
selectValue: '',
options: [
{
value: 'cn',
label: '中文'
}, {
value: 'en',
label: 'English'
}
]
}
},
created () {
let that = this
console.log(localStorage.lang)
that.selectValue = localStorage.lang == undefined ? 'cn' : localStorage.lang
},
methods: {
// 语言切换
langChange (e) {
// console.log(e)
localStorage.setItem('lang', e)
this.$i18n.locale = e
}
}
}
</script>