# # 国际化

Vue-iClient3D-WebGL 组件内置了中英文资源，组件内部默认使用中文。

若你希望使用其他语言，你需要参考此文件
配置一个语言资源文件，传入组件中。以英文为例，在 main.js 中：

    import Vue from 'vue';
    import VueiClient from '@supermap/vue-iclient3d-webgl';
    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-iclient3d-webgl';
    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-iclient3d-webgl';
    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/iClient3D-WebGL-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/iClient3D-WebGL-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>