iview实现国际化

Posted nizuimeiabc1

tags:

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

由于项目需求需要配置国际化,使用的UI框架为iview, vue国际化使用的是vue-i18n组件,按照官方要求下载 vue-i18n(8.14.0),版本大于6.0 按照官方提供的6.0配置方案解决。

第一步:需要先进行安装

npm install vue-i18n

第二步:  创建一个新的目录 language 目录, 在该目录下创建 index.js、en-US.json、zh-CN.json。

   index.js 配置i18n: 按照官方文档引入需要的包,然后配置 (全是按照官方文档一步一步走)这里直接上代码

import Vue from ‘vue‘;
import iView from ‘iview‘;//也可以import iView from ‘view-designer‘;
import VueI18n from ‘vue-i18n‘;
import en from ‘iview/dist/locale/en-US‘;
import zh from ‘iview/dist/locale/zh-CN‘;
import US from ‘./en-US‘;
import CN from ‘./zh-CN‘

Vue.use(VueI18n);
Vue.locale = () => {};

const messages = {
  en: Object.assign(US, en),  //将自己的英文包和iview提供的结合
  zh: Object.assign(CN, zh)  //将自己的中文包和iview提供的结合
};

const i18n = new VueI18n({
 locale:window.localStorage.getItem(‘language‘)===null?‘zh‘:window.localStorage.getItem(‘language‘), // 语言标识,设置默认语言
  messages  // set locale messages
});

Vue.use(iView, { 
  i18n: (key, value) => i18n.t(key, value)
})
//上面这个比较重要 按照官网提供的方法 new Vue({ i18n }).$mount(‘#app‘); 运行会出错 提示无法找到  _t 属性。 按照上述方法配置可以解决此问题(网上找的方法,亲测没问题)

//将i18n 导出,在main.js 的 new Vue({}) 中需要配置
export default i18n

   main.js 中只需要导入该文件,就可以正常使用了

import i18n from ‘./language‘

new Vue({
  el: ‘#app‘,
  router,
  i18n, //不配置会不生效的
  components: { App },
  template: ‘<App/>‘
})

   en-US.json 配置英文翻译 这个应该很简单 我随便举了几个例子

{
  "hello" : "Hello",
  "welcome": "Welcome"
}

   zh-CN.json 配置中文翻译 这个也一样

{
  "hello" : "你好",
  "welcome": "欢迎光临"
}

  在vue文件中使用方法:

<template>
    <div class="containt">
        <!--在标签中直接添加元素{{$t(‘home‘)}}-->
      {{ $t(‘welcome‘) }}
    </div>
    <!--在placehold等标签属性中使用-->
    <div :placeholder="$t(‘home‘)">
    </div>
    <!--在js方法中使用-->
    <!--alert( this.$t(‘home‘) )-->
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>
  .containt{
    height: 100%;
    width: 100%;
    background-color: #15162C;
    color: #fff;
  }
</style>

  结果:

技术图片

 

后面就是切换语音:使用的是iview的Dropdown下拉菜单click点击

<Dropdown>
        <span>
          语言
          <Icon type="ios-arrow-down"></Icon>
        </span>
        <DropdownMenu slot="list">
          <DropdownItem @click.native="changeLanguage(‘zh‘)">
            中文
            </DropdownItem>
          <DropdownItem @click.native="changeLanguage(‘en‘)">
            英文
        </DropdownMenu>
      </Dropdown>

下面的切换语言的函数放在index.vue首页里面:

// 切换语言
    changeLanguage(language) {
      if (language == "zh") {
        this.language = "en-US";
        this.$i18n.locale = this.language; //关键语句
        this.addCookie("lang", this.language);
      } else {
        this.language = "en";
        this.$i18n.locale = this.language; //关键语句
        this.addCookie("lang", this.language);
      }
      location.reload();
    },

 

本文转自:https://www.cnblogs.com/webtaotao/p/11381636.html

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

使用vue-i18n实现项目的国际化 以及iview的国际化

iview国际化自己的语言包也合并成功了,但是iview的page组件不能翻译,还是中文的

ngx-translate实现国际化:this.translate.use()this.translate.get()this.translate.instant()onLangChange(代码片段

iview国际化问题(iview官方提供的兼容vue-i18n@6.x+使用组件报错)

给iview项目加一个i18n国际化翻译

spring 国际化 js怎么设置