# 国际化
Vue-iClient 组件内置了中英文资源，组件内部默认使用中文。
若你希望使用其他语言，你需要参考此文件配置一个语言资源文件，传入组件中。以英文为例，在 main.js 中：
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient';
import App from './App.vue';
Vue.use(VueiClient, { locale: VueiClient.lang.en }); // VueiClient.lang.en 为内置英文资源文件
# 兼容 vue-i18n
如果你的项目中使用了 vue-i18n，你有两种方式来进行兼容。
# 传入 i18n
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient';
import VueI18n from 'vue-i18n';
import App from './App.vue';
Vue.use(VueI18n);
const messages = {
en: {
message: { hello: 'hello' }
},
zh: {
message: { hello: '你好' }
}
};
const i18n = new VueI18n({
locale: 'en', // 设置地区
messages // 设置地区信息
});
Vue.use(VueiClient, { i18n });
new Vue({ i18n }).$mount('#app');
# 手动进行合并
import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient';
import VueI18n from 'vue-i18n';
import App from './App.vue';
Vue.use(VueI18n);
Vue.use(VueiClient);
const messages = {
en: {
message: { hello: 'hello' },
...VueiClient.lang.en // 或者用 Object.assign({ message: 'hello' }, VueiClient.lang.en)
},
zh: {
message: { hello: '你好' },
...VueiClient.lang.zh // 或者用 Object.assign({ message: '你好' }, VueiClient.lang.zh)
}
};
const i18n = new VueI18n({
locale: 'en', // 设置地区
messages // 设置地区信息
});
new Vue({ i18n }).$mount('#app');
# 通过 CDN 的方式加载语言文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl-vue.min.js"></script>
<script>
SuperMap.Components.locale(SuperMap.Components.lang.en);
</script>
# 搭配 vue-i18n 使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl-vue.min.js"></script>
<script>
Vue.locale = () => {};
const messages = {
en: Object.assign({ message: 'hello' }, SuperMap.Components.lang.en),
zh: Object.assign({ message: '你好' }, SuperMap.Components.lang.zh)
};
const i18n = new VueI18n({
locale: 'en', // 设置地区
messages // 设置地区信息
});
new Vue({
el: '#app',
i18n: i18n
});
</script>