(切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
最近项目有多语言设置
h5使用的是vantUI,vant的组件方法挺好的 可以自定义组件文字显示，
但是！一旦有些自定义不注意的，还是会显示中文
所以就使用国际化，统一更改一下吧
而且由于i18n.js只会加载一次，所以vant的组件文字不会及时更新（与elementUI不同，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
main.js文件
- vant我个人是按需引入，方式应该差别不大
import i18n from '@/plugins/i18n.js'
const app=new Vue({
el: '#app',
router,
i18n,
store,
render: h => h(App)
})
封装切换的方法
- …/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'])
}