• 
       
       
       
  • 
       
       
       
       
       
        
       
       

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

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

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

        一、前言

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

      2. vue + vue-i18n
      3. angular + angular-translate
      4. react + react-intl
      5. jquery + jquery.i18n.property
      6. 在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)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?