还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例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),
},
}
}