最近项目有多语言设置
h5使用的是vantUI,vant的组件方法挺好的 可以自定义组件文字显示，
但是！一旦有些自定义不注意的，还是会显示中文
所以就使用国际化，统一更改一下吧
而且由于与elementUI 方法不同，i18n.js只会触发一次，所以vant的组件文字不会及时更新（elementUI国际化点这里)
1.i18n.js文件
getLang是获取到缓存的值，，可以设置为store的值，只要能判别语言就可以，||‘zh’预设没有获取到语言，给个默认的将切换vant的方法进行封装使用（确保能及时更新vant文字显示和新增语种）import Vue from 'vue'import VueI18n from "vue-i18n";import {changeLang} from '@/utils/methods'Vue.use(VueI18n)import {getLang} from "../common/cookies";changeLang(getLang()||'zh')const i18n = new VueI18n({locale: getLang() || 'zh', // 语言标识messages: {'en': require('@/locales/en.json'),'zh': require('@/locales/zh.json'),}})export default i18n
2.main.js文件
vant我个人是按需引入，方式应该差别不大import i18n from '@/plugins/i18n.js'const app=new Vue({el: '#app',router,i18n,store,render: h => h(App)})
3.封装切换的方法
…/locales/nl是自己拿vant的中文翻译文件进行翻译后的，也就是要新增nl这个语种，路径 ：vant/lib/locale/lang/zh-CN新增语种需要设定语种名：语种文件然后添加到vant语言里（这点真棒）在更改语言后进行使用该方法即可import ens from 'vant/lib/locale/lang/en-US'import nls from '../locales/nl'import zhs from 'vant/lib/locale/lang/zh-CN'import { Locale } from 'vant'//进行更改语言后 更新vant组件语言export const changeLang=(val)=>{let loc={en:"en-US",nl:"nl-NL",zh:"zh-CN",}let locs={en:ens,nl:nls,zh:zhs,}let messages={'nl-NL': nls}Locale.add(messages)console.log('获取的值：'+val)Locale.use(loc[val||'zh'],locs[val||'zh'])}
