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

Posted SunFlower914

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现网站的国际化语言切换相关的知识,希望对你有一定的参考价值。

一、基本步骤

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

以上是关于实现网站的国际化语言切换的主要内容,如果未能解决你的问题,请参考以下文章

国际化,切换语言的一些问题

Android:应用多语言切换,国际化实现

java中如何实现多语言切换

[iOS]怎么在iOS开发中切换显示语言实现国际化

[iOS]怎样在iOS开发中切换显示语言实现国际化

SwiftUI: 极简实现App内快速切换本地化语言