vue、elementUI项目国际化

1.安装 npm i vue-i18n -S
2.在src下新建文件夹lang、lang/zh.js根据项目自行配置中文、lang/en.js根据项目自行配置英文
3.lang/index.js设置国际化配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import zh from './zh'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'


Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh', // 设置地区
  messages:{
    en:{
      ...enLocale,
      ...en
    },
    zh:{
      ...zhLocale,
      ...zh
    }
  },
})


export default i18n

4.将i18n引入main.js, 并在初始化注册

使用方式

1. 双括号 {{$t(‘xxx.yyy’)}}

<div>{{$t('login')}}</div>

2.绑定到属性上 :prop="$t(‘xxx.yyy’)"

<van-field v-model="loginForm.phone" name="phone" :label="$t('tel')" :placeholder="$t('telEmpty')" @blur="changePhone()" />

3.切换中英文时修改localStorage中lang的值 英文:en /中文:zh