实现网站的国际化语言切换

发布时间:2022-06-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了实现网站的国际化语言切换脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、基本步骤

1:安装    yarn add vue-i18n

 在此路径新建一个.js文件: src/lang/index.js后:

实现网站的国际化语言切换

 2:导入     import VueI18n from 'vue-i18n'3:注册   import Vue from 'vue'   Vue.use(VueI18n)4:实例化   const  i18n=new VueI18n({       locale:'当前语言的标识',   // en:英文  zh:中文       messages:{          //  语言包          en:{              home:'home'          },          zh:{              home:'首页'          }       }   }) 5:暴露出去  export default   i18n 6:挂载到main.js    import i18n from '@/lang'    new Vue({        i18n    })

使用: <div>{{$t('home')}}</home>

二、在main.js中导入element-ui国际化语言配置

import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

三、新建一个.vue文件通过按钮实现语言切换

实现网站的国际化语言切换

 注意:

        this.$i18n.locale能获取与设置当前语言在js文件中使用国际化

四、实现网站菜单的国际化处理,需要在路由中引入

import i18n from '@/lang'     后    将 i18n.t===this.$t

实现网站的国际化语言切换

脚本宝典总结

以上是脚本宝典为你收集整理的实现网站的国际化语言切换全部内容,希望文章能够帮你解决实现网站的国际化语言切换所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: