vue i18n 实现前端国际化

1.安装

npm install vue-i18n

2.使用

1.新建一个js文件（随便自己命名，我的命名时lang.js），导出文件;

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default new VueI18n({
  locale:localStorage.getItem('lang') || 'zh',    // 前端选择语言的时候可以缓存起来，这样下次进入的时候就会是上次选择的语言包，默认是中文，
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh': require('@/assets/lang/zh'),   // 中文语言包    
    'en': require('@/assets/lang/en'),    // 英文语言包
    'th': require('@/assets/lang/th'),    // 泰语语言包
    'zh-TW': require('@/assets/lang/zh-TW'),    // 中文（繁体）语言包  
  }
})

上面引入的语言包是js的文件，就是你页面上要用到切换的语言文字都放在这个文件里面；
下面是zh.js和en.js内容，里面的键值要是一样的，这样调用的时候可以统一

//zh.js内容
export const m = {
  email:'邮箱号',
  password:'密码',
  emailTips:'请输入邮箱号', 
  trueEmail:'请输入正确的邮箱号码', 
  passwordTips:'请输入密码', 
  };  

//en.js内容
export const m = {
  email:'Account',//邮箱号
  password:'Password',//密码
  emailTips:'Input E-mail', //请输入邮箱号
  trueEmail:'Invalid E-mail', //请输入正确的邮箱号码
  passwordTips:'Please input a password', //请输入密码
  loginError:'Input Password',
  };

2.在main.js中引入，然后挂载

import i18n from './lang.js'；
new Vue({
  el: '#app',
  i18n,  
  components: { App },
  template: '<App/>'
})

3.切换语言

利用watch监听语言选择改变语言类型；然后存缓存

<el-radio v-model="choiceLang" label="zh">中文</el-radio>
<el-radio v-model="choiceLang" label="th">ไทย</el-radio>
<el-radio v-model="choiceLang" label="en">English</el-radio>

watch:{
  choiceLang(val) {
    localStorage.setItem('lang',val);
    this.$i18n.locale = val;;
  }
},

4.页面中引用

a.html引用 $t('m.email')

<div class="loginTit">{{$t('m.email')}}：</div>
<el-input v-model.trim="email" :placeholder="$t('m.emailTips')"></el-input>

b.js引用 this.$t('m.passwordTips')