(切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包

最近项目有多语言设置
h5使用的是vantUI,vant的组件方法挺好的 可以自定义组件文字显示，
但是！一旦有些自定义不注意的，还是会显示中文
所以就使用国际化，统一更改一下吧

而且由于与elementUI 方法不同，i18n.js只会触发一次，所以vant的组件文字不会及时更新（elementUI国际化点这里)

• 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• vant我个人是按需引入，方式应该差别不大

import i18n from '@/plugins/i18n.js'
const app=new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
})
1
2
3
4
5
6
7
8

• …/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'])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27