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, 并在初始化注册
使用方式
- 双括号 {{$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