文档章节

iview实现国际化

o
 osc_wws45aot
发布于 2019/08/20 10:46
字数 509
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

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

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

import Vue from 'vue';
import iView from 'iview';
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: localStorage.getItem("locale") || 'en',  // 设置语言,如果本地存储了则用本地的,没有则默认 'en'
  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文件中使用 {{$t('变量名')}}

<template>
    <div class="containt">
      {{ $t('welcome') }}
    </div>
</template>

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

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

  结果:

  

  没有实现按键切换, 所以直接修改language/index.js 文件中的 内容将i8n 改为如下:

const i18n = new VueI18n({
  locale:  'zh',  // set locale
  messages  // set locale messages
});

  结果如下:

  

  上面的配置就可以实现iview的国际化,希望对大家有帮助

 

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

物联网开发服务开发虚拟设备需要几步?

云栖号快速入门:【点击查看更多云产品快速入门】 不知道怎么入门?这里分分钟解决新手入门等基础问题,可快速完成产品配置操作! 物联网平台设备的正常开发流程是:设备端开发完成,设备上报...

osc_2axit9df
44分钟前
18
0
互联网互联网必看文章墙裂推荐

后端必看文章系列 大型项目架构演进过程及思考的点

code-ortaerc
45分钟前
20
0
ACL2020论文整理 - 知乎

ACL2020录取文章已经放出,链接如下: ACL2020论文集合 www.aclweb.org 为了以后更加方便地阅读论文,也本着一颗开源之心,花一个下午的时间整理了一下相关论文。鉴于本人精力有限,并且也只...

osc_5w65ebjo
45分钟前
10
0
SU(N) Hubbard 模型平均场

osc_31d5oo2i
47分钟前
18
0
Python语言及其应用PDF高清完整版百度云盘免费下载|python基础教程PDF电子书推荐

编辑推荐 本书内容易于理解,而且读起来生动有趣,是编程和Python初学者不可多得的教程。书中首先介绍了Python的基础知识,然后逐渐深入多种主题,结合教程和攻略式风格来讲解Python 3中的概...

osc_nbg2lo7i
48分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部