Avue代码i18n国际化的方法

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1，引用avue文件
    • 2，配置i18n
    • 3，设置中英文对照
    • 4， 切换中英文
    • 问题发现与解决

      ---

      公司需要将原有的项目国际化，在原先的项目中，使用了avue相关的组件，如avue-crud等。 怎么国际化呢？ 以下是我的配置和处理方式。

      

      1，引用avue文件

      

      2，配置i18n

      

      i18n的引用和配置，请参考https://dajianshi.blog.csdn.net/article/details/130891338

      附，i18n,js代码：

       
      import Vue from 'vue' 
      import VueI18n from 'vue-i18n' 
      import elementEN from 'element-ui/lib/locale/lang/en'; 
      import elementZH from 'element-ui/lib/locale/lang/zh-CN'; 
      import locale from 'element-ui/lib/locale'; 
      import myZH from './i18n/zh'; 
      import myEN from './i18n/en'; 
      Vue.use(VueI18n) 
       
      const messages = { 
          'zh':{  
              ...myZH, 
              ...elementZH 
          },    
          'en': { 
              ...myEN, 
              ...elementEN 
          },   
      } 
       
      // 最后 export default，这一步肯定要写的。 
      const i18n=new VueI18n({ 
          locale: 'en', 
          messages: messages // set locale messages 
      }) 
       
      import Element from 'element-ui'; 
       
      Vue.use(Element, { 
          i18n: (key, value) => i18n.t(key, value) // 在注册Element时设置i18n的处理方法 
      }); 
      Vue.use(window.AVUE, { 
          i18n: (key, value) => i18n.t(key, value) // AVUE国际化核心代码 
      }); 
      locale.i18n((key, value) => i18n.t(key, value))  //处理语言包的问题 
      export default i18n 
       
      

      3，设置中英文对照

      

      4， 切换中英文

      changeLanguage(i) { 
           if (i == 0) { 
             this.$i18n.locale = "zh"; 
             localStorage.setItem('lang',"zh") 
           } else { 
             this.$i18n.locale = "en"; 
             localStorage.setItem('lang',"en") 
           }  
         }, 
      

       
      中文 
      English 
       
      

      点击切换按钮，就会改变中英文的状态。 Avue因为是内部的封装，编辑，删除，新增等组件不用做额外的代码变换处理，只要将对应的中英文做对应的字段处理就可以。

      问题发现与解决

      问题：

      在i18n中使用

      Vue.use(window.AVUE, { 
          i18n: (key, value) => i18n.t(key, value) // 在注册Element时设置i18n的处理方法 
      }); 
      

      的时候，页面中调用后台数据的axios方法会报错。显示post或者get没有定义。

      

      这时候的解决办法如下：

       
      import Vue from 'vue' 
       import axios from 'axios';  window.axios=axios; 
       
      export default { 
        inject: ["contain"],  
        data () { 
          // const topmenu=this.$t('menu') 
          return { 
            baseList: [], 
            imgUrl: '/jetlinks/file/static' 
          } 
        }, 
       
        methods: {  
        ....... 
          handleBuild () { 
       
            this.contain.handleInitActive(); 
            const loading = this.$loading({ 
              lock: true, 
              text: this.$i18n.t('tips_save_loading'), 
              spinner: 'el-icon-loading', 
              background: 'rgba(0, 0, 0, 0.7)' 
            }); 
            this.$nextTick(() => { 
              html2canvas(document.getElementById('content'), { 
                onrendered: (canvas) => { 
                  function dataURLtoFile (dataurl, filename) { 
                    var arr = dataurl.split(','), 
                        mime = arr[0].match(/:(.*?);/)[1], 
                        bstr = atob(arr[1]), 
                        n = bstr.length, 
                        u8arr = new Uint8Array(n); 
                    while (n--) { 
                      u8arr[n] = bstr.charCodeAt(n); 
                    } 
                    return new File([u8arr], filename, { type: mime }); 
                  } 
       
                  var file = dataURLtoFile(canvas.toDataURL('image/jpeg', 0.1), new Date().getTime() + '.jpg'); 
                  var formdata = new FormData(); 
                  formdata.append('file', file) 
                   
                  axios.post(this.imgUrl, formdata, { 
                    headers: { 
                      "Content-Type": "multipart/form-data" 
                    } 
                  }).then(res => { 
                    const url = res.data.result 
                    const formdata = { 
                      visual: { 
                        id: this.$route.params.id, 
                        backgroundUrl: url 
                      }, 
                      config: { 
                        id: this.$route.params.id, 
                        visualId: this.$route.params.id, 
                        detail: JSON.stringify(this.contain.config), 
                        component: JSON.stringify(this.contain.nav), 
                      }, 
                    } 
         
      }