Vue项目切换语言，vue项目国际化，使用vue-i18n前端实现中英文切换

在项目需求中，我们会遇到国际化的中英文切换。
使用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: ''
})

接着就是开始使用啦，需要使用$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进行取出就可以进行语言的切换啦。

若有疑问，可留言！
如有帮助，可给请作者的一杯咖啡添砖加瓦：