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") 
     }  
   }, 复制

<el-dropdown-menu slot="dropdown"> 
<el-dropdown-item @click.native="changeLanguage(0)">中文</el-dropdown-item> 
<el-dropdown-item @click.native="changeLanguage(1)">English</el-dropdown-item> 
</el-dropdown-menu> 复制

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

问题发现与解决

问题：
在i18n中使用

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

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

这时候的解决办法如下：

<script> 
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), 
                }, 
              } 
   
} 复制