狗万官网酒店 > 狗万官网下载 > vue利用i18n落实工业化的主意详解_vue.js

vue利用i18n落实工业化的主意详解_vue.js

来源: 2019-09-09 19:44 我来投稿 参与评论
这篇文章主要给大家介绍了关于vue利用i18n如何实现工业化的相关资料,文中通过示范代码介绍的独特详细,对大家学习或者使用vue具有原则性的参考学习价值,要求的朋友们下面来累计学习学习吧

一、前言

在4k广告机中要求实现多语言切换,这会儿接触到形象化,前者框架无数,其中几种热门的框架都有相匹配的盐碱化插件工具。比如:

  • vue + vue-i18n
  • angular + angular-translate
  • react + react-intl
  • jquery + jquery.i18n.property
  • 在4K广告机项目中应用的前端框架为Vue,于是我们将使用vue-i18n本条插件进行现代化功能的落实。

    二、说到底实现效果

    三、产业化的落实

    1、最先在协调之档次中安装 vue-i18n依托包。此地使用NPM开展安装,如果没有科学上网请使用CNPM开展安装。

    npm install vue-i18n --save-dev

    2、名将i18n引入vue老中,在品种中贯彻调用API和模板语法。现今在main.js外方引入 vue-i18n。

    import VueI18n from 'vue-i18n'  //引入vue-i18n
    
    Vue.use(VueI18n); //穿越插件的样式挂载
    
    /*---------基本使用-----------*/
    const i18n = new VueI18n({
     locale: 'CN', // 语言标识
     messages : {
     en: {
      message: {
      hello: 'hello world'
      }
     },
     cn: {
      message: {
      hello: '您好、世界'
      }
     }
     }
    })
    /*---------利用语言包-----------*/
    const i18n = new VueI18n({
     locale: 'zh', // 语言标识
     //this.$i18n.locale // 穿越改组locale的值来促成语言切换
     messages: {
      'zh': require('./common/lang/zh'), // 中文语言包
      'en': require('./common/lang/en') // 英文语言包
     }
    })
    
    /* eslint-disable no-new */
    new Vue({
     el: '#app',
     i18n,  //满载到老,定点得在这个位置,而不是comonents外方
     template: '<App/>',
     components: {
     App
     }
    });

    地方的编码正式将 vue-i18n 引入 vue 品种中,创造一个 i18n 老对象,富有全局调用。咱通过 this.$i18n.locale 来开展语言的改组。

    3、下一场我们就要求组建两个js文件(或者josn文件)表现语言包。

    其中en.js语言包中代码为:

    module.exports = {
     message: {
     login: 'Login',
     Username: 'Username',
     Password: 'Password',
     Captcha: 'Captcha',
     Language: 'Language',
     zh: 'Chinese',
     en: 'English'
     }
    }

    其中zh.js语言包中代码为:

    module.exports = {
     message: {
     login: '登录',
     Username: '地名',
     Password: '电码',
     Captcha: '验证码',
     Language: '语言',
     zh: '中文',
     en: '英文'
     }
    }

    说到底我们只要求通过触发事件的样式,来支配 locale 的值,扮演调用对应的语言包就得以实现工业化啦。

    4、组件中触发事件切换 locale 的值,据此实现语言的改组。template代码:

    <div class="lang">
     <el-radio-group v-model="language" size="mini">
      <el-radio v-for="item of lang" :label="item.value" border>{{item.label}}</el-radio>
     </el-radio-group>
    </div>

    scrpit代码:

    import Vue from 'vue'
    
     export default {
     mounted() {
      this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1 //多少加载时判断当前属于哪种语言,为伊单选按钮赋值
     },
     data() {
      return {
      language: 0,
      lang: [{
       label: this.$t('message.zh'),  //模板语法的一种
       value: 0
      }, {
       label: this.$t('message.en'),
       value: 1
      }],
      }
     },
     watch: { //侦听器
      language: function (val) {  //侦听单选按钮的变通,据此进行改组语言
      val === 0 ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
      Vue.set(this.lang, 0, {label: this.$t('message.zh'), value: 0});
      Vue.set(this.lang, 1, {label: this.$t('message.en'), value: 1})
      /**
      this.lang: [{
       label: this.$t('message.zh'),  //如果不利用Vue.set,也得以利用更新数据的主意
       value: 0
      }, {
       label: this.$t('message.en'),
       value: 1
      }]
      **/
      }
     },
     }

    瞩目:鉴于 JavaScript 的限制,Vue 决不能检测当前变动的数组,只渲染一次,如果数据不更新视图就不更新的组件,如果切换语言则要求更新一下数目才能切换组件内的多语言。

    四、vue-i18n 多少渲染的模版语法

    模板语法暂时分为三种:

    //vue组件模板的采取
    <div>{{$t('message.zh')}}</div>
    
    //vue组件模板数据绑定的采取
    <input :placeholder="$t('message.zh')"></input>
    
    //vue组件data外方赋值的采取
    data:{
     msg:this.$t('message.zh');
    }

    五、Element UI组件库与vue-i18n的兼容问题

    鉴于项目中应用了Element UI组件库,其它里面内置的局部文字也是急需国际化,好在Element UI是有无的支持。但是Element UI默认只兼容vue-i18n的5.x本版,而今天vue-i18n的本子已经到了7.x,Element UI法定文档中“产业化”一节中对此有实际说明。下将手动设置内容贴出来:

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import VueI18n from 'vue-i18n'
    import enLocale from 'element-ui/lib/locale/lang/en'  //引入Element UI的英文包
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'  //引入Element UI的汉语包
    
    Vue.use(VueI18n);
    Vue.use(ElementUI, {
     i18n: (key, value) => i18n.t(key, value)
    }); //兼容i18n 7.x本版设置
    
    const i18n = new VueI18n({
     locale: 'zh', // 语言标识
     messages: {
     zh: Object.assign(require('@/components/common/lang/zh'), zhLocale), //此地需要注意一下,是如何导入多个语言包的
     en: Object.assign(require('@/components/common/lang/en'), enLocale),
     }
    });

    瞩目:关于导入多个语言包时遇到的题目,我是在Element UI 产业化文档中发现的消灭办法。

    六、路由与面包屑导航国际化的语法问题

    在对面包屑导航进行现代化时不掌握如何开展。在街上翻阅了有的资料,得到如下代码,完善解决问题:
    router.js(路由配置文件)

    {
     path: '/index',
     name: 'nav.Home',  //直接点出对应的文字
     component: (resolve) => require(['@/components/index'], resolve)
    }

    Breadcrumb.vue(面包屑导航组件)

    <div id="Breadcrumb">
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">{{$t('nav.Home')}}</el-breadcrumb-item>
      /*瞩目{{$t(item.name)}}*/
      <el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path}">{{$t(item.name)}}</el-breadcrumb-item>
     </el-breadcrumb>
     </div>

    七、至今,产业化的坑算是踩完了。

    总结

    上述就是这篇文章的方方面面内容了,瞩望本文的情节对大家的上学或者工作具有原则性的参考学习价值,谢谢大家对脚本的师之支持。

    义务编辑:狗万官网酒店
     
     
    0% (0)
     
     
    0% (0)
    机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
    地名: 匿名?


  •