首页 前端知识 Avue代码i18n国际化的方法

Avue代码i18n国际化的方法

2024-07-02 23:07:25 前端知识 前端哥 680 659 我要收藏

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

在这里插入图片描述

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

文章目录

      • 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), 
                }, 
              } 
   
} 
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13798.html
评论
发布的文章

sublime text的json快捷键

2024-07-30 22:07:35

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!