当前位置：首页 > news >正文

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

news 来源：原创 2024/6/2 9:24:39

最近项目有多语言设置
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'])
}