当前位置: 首页 > Web前端 > vue.js

Vue项目中使用国际化及配置动态切换语言的方法

时间:2023-03-31 16:24:06 vue.js

主要由以下模块组成:src\main.jssrc\locales\index.jssrc\locales\zh_CN.jsonsrc\utils\config.js#src\main.jsimporti18nfrom'@/locales/index.js'newVue({el:'#app',i18n,router,store,render:h=>h(App)})#src\locales\index.jsimportCookiesfrom'js-cookie'importVueI18nfrom'vue-i18n'importVuefrom'vue'constdata={}constlocale=Cookies.get('hb_lang')||'en_US'constreadDir=['en_US','zh_CN','th_TH']for(leti=0;i{{$t('欢迎登录')}}#src\utils\config.jsimportCookiesfrom'js-cookie'importi18nfrom'@/locales/index.js'constKey='hb_lang'exportfunctionget(){returnCookies.get(Key)}exportfunctionset(data){i18n.locale=datareturnCookies.set(Key,data)}exportfunctionremove(){returnCookies.remove(Key)}其中,动态切换时需要的语言,调用set方法即可,例如:import{setassetLanguage}from'@/utils/config.js'setLanguage('en_US')#注意上面的配置要结合Vue的{{}},例如上面提到的:{{$t('solutions')}}如果像下面这样,会导致文本在动态更新的时候switchinglanguages://不要这样写,解决方法在下面解决方案:#同系列其他文章在Nuxt项目中使用国际化以及配置方式动态切换语言