在项目需求中，我们会遇到国际化的中英文切换。
使用vue搭建的项目中我们可以使用i18n插件进行项目的中英文切换。
npm引入i18n
npm install i18n --save-dev
为了数据的使用方便，我们需要在src文件夹下建立一个如下图的文件夹
index.js：
import Vue from 'vue'
import VueI18n from 'vue-i18n'Vue.use(VueI18n)
//使用的是sessionStroage中存储的的lang，默认是中文简体cn
let language = window.sessionStorage.getItem('lang') || 'cn'
const i18n = new VueI18n({locale: language,//将i18n的locale设置为你需要的语言messages: {'cn': require('./config/cn'), //中文简体'tw': require('./config/tw'), //中文繁体'en': require('./config/en') //英文}
})
export default i18n
接下来我们需要看一下cn.js、tw.js、en.js中分别需要什么
cn.js：
module.exports = {language: {text: '中文简体'}}
那么tw.js和en.js分别对应：
tw.js:
module.exports = {language: {text: '中文繁體'}
}
en.js:
module.exports = {language: {text: 'English'}
}
接着，我们需要在项目的main.js中引入i18n以方便全局使用
import Vue from 'vue'
import App from './App'
import router from './router'
import i18n from '@/language'new Vue({el: '#app',router,i18n, //将i18n挂载到vue全局使用components: { App },template: '<App/>'
})
接着就是开始使用啦，需要使用$t{’’}进行数据的引用
在vue文件中的使用：
<p>{{$t('language.text')}}</p>
在js中引用：
console.log(this.$t('language.text')) //简体中文
如果在项目中我们需要通过按键进行语言的切换，那么在切换语言的click事件中，我是使用sessionStrong进行数据的存储
chooseLan (val) {this.$i18n.locale = val //this.$i18n的local进行语言切换window.sessionStorage.setItem('lang', val)
}
然后就如一开始在language文件夹的index.js文件中一样，使用sessionStorage.getItem进行取出就可以进行语言的切换啦。
若有疑问，可留言！
如有帮助，可给请作者的一杯咖啡添砖加瓦：
