最近项目中用到国际化之前看到一个博客写的vue-i18n的使用非常好,后来就找不到是哪个了心塞。
vue-i18n的基本使用
首先肯定是下载啦!
npm install vue-i18n --save
然后在src下边新建一个i8n文件夹
//cn.js// import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
const cn = {header: {headerTop: {'text': '你好',}}// ...zhLocale
}export default cn
//en.js// import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
const en = {header: {headerTop: {'text': 'Hellow',}}// ...enLocale
}export default en
//index.jsimport en from './en'
import cn from './cn'
export default {en: en,cn: cn
}
//i8n.jsimport 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)) // 兼容elementexport default i18n
然后再main.js中引入
//main.jsimport i18n from './i18n/i18n' //先引入new Vue({el: '#app',router,i18n, //在这个地方注册components: {App},template: '<App/>'
})
接下来是页面部分
<template><div><div>{{$t('header.headerTop.text')}}</div><button @click="langChange('cn')">中文</button><button @click="langChange('en')">英文</button></div>
</template><script>
export default {data () {return { }},created () {let that = thisconsole.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><style lang='scss'>
</style>
效果图
这个是静态页面翻译,我一直想找怎样从后台获取到的数据进行中英文切换,希望大佬可以指点一下,万分感谢!