# 使用华为云Astro轻应用为组件配置中英文语言属性
#### 期望实现效果
为组件配置多语言属性，实现组件在不同语种环境下都可正常显示。在华为云Astro轻应用中对组件进行国际化配置，主要是修改国际化资源文件（i18n）。下面以为组件widget_demo_i18n配置中文和英文两种语言属性为例，其最终实现效果如[图1]、[图2]。
图1中文环境下显示效果   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001943275464.png "点击放大")
图2英文环境下显示效果   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001943116156.png "点击放大")
#### 功能实现方法
1. 下载组件模板。 
   1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。
   
   2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001920585678.png)，选择"环境管理 \> 环境配置"，进入环境配置。
   
   3. 在主菜单中，选择"维护"。
   
   4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。
   
   5. 在组件列表中，单击widgetVueTemplate，进入模板详情页。
   
   6. 单击"下载"，设置组件的名称为"widget_demo_i18n"，单击"保存"，将模板下载到本地。
      如果选择"下载原始模板"，下载到本地的组件包中，组件名称不会被修改。
      图3保存模板   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992365397.png "点击放大") 
   
   
   
   
2. 为组件设置多语言属性。 
   1. 增加"messages-en.json"和"messages-zh.json"国际化资源文件，"messages-zh.json"中需要使用unicode编码。
      - "messages-zh.json"文件内容如下：
        ```
        {
        "zh-CN": {
        "name" : "\u540d\u79f0"
        }
        }
        ```
        
      
      
      
      - "messages-en.json"文件内容如下：
        ```
        {
        "en-US": {
        "name" : "name"
        }
        }
        ```
        
       
   
   2. 在"packageinfo.json"文件中，增加i18n节点，指定国际化资源文件的文件名。并增加requires节点，指定需要依赖的Vue和VueI18n库。
      其中，库文件名称和版本号，可在库详情页面获取。
      ```
      {
        "widgetApi": [
          {
            "name": "widget_demo_i18n"
          }
        ],
        "widgetDescription": "widget i18n demo",
        "authorName": "test",
        "width": "",
        "height": "",
        "i18n": [
          {
            "name": "messages-en"
          },
          {
            "name": "messages-zh"
          }
        ],
        "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
      {
            "name": "global_VueI18n",
            "version": "100.7"
          },
          {
            "name": "global_Element",
            "version": "100.8"
          }
        ]
      }
      ```
      **在"requires"里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如"global_VueI18n"是基于"global_Vue"的，需要写在"global_Vue"之后。**
      
   
   3. 在"widget_demo_i18n.js"的render方法中，使用平台提供的"HttpUtils.getI18n"方法返回一个"i18n"变量，并新建Vue实例传入该"i18n"变量。
      ```
      var i18n = HttpUtils.getI18n({
      locale: HttpUtils.getLocale(),
      messages: thisObj.getMessages()
      });
      
                  var vm = new Vue({
      el: $("#widget_demo_i18n", elem)[0],
      i18n: i18n,
      data: {
      form: {
      name: "miao"
      }
      }
      })
      ```
      
   
   4. 在"widget_demo_i18n.ftl"中，通过VueI18n提供的"$t"方法，使用国际化资源。
      ```
      <div id="widget_demo_i18n">
      <el-form :model="form" :inline="true">
      <el-form-item :label="$t('name')">
      <el-input v-model="form.name"></el-input>
      </el-form-item>
      </el-form>
      </div>
      ```
      
   
   5. 将开发好的组件代码压缩到后缀为".zip"的压缩文件中，也可以单击[下载链接](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/widget_demo_i18n.zip)，获取样例包"widget_demo_i18n.zip"。
   
   
   
   
3. 在组件库中上传组件包。 
   1. 在环境配置的"维护 \> 全局元素 \> 页面资产管理 \> 组件"中，单击"提交新组件"。
   
   2. 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击"提交"。
      图4上传自定义组件示例   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992365657.png "点击放大")
      
      表1上传自定义组件参数说明 
      | 参数    | 说明                                           | 示例                                                                          |
      |:---|:---|:---|
      | 名字    | 新提交组件的名称，系统会根据组件包名称自动填充。                     | widgetdemoi18n                                                              |
      | 上传源文件 | 组件源文件包。                                      | 选择[2.e]中的widget_demo_i18n.zip |
      | 场景    | 组件包的应用场景，可同时选择多个。                            | 高级页面                                                                        |
      | 发行说明  | 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的"概况"页签中进行显示。 | 自定义组件                                                                       |
         
      
   
   
   
   
4. 关闭Vue3框架渲染组件开关。 
   本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。
   图5界面报错   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953304910.png)
   1. 在应用设计器中，单击左侧导航栏中的"设置"。
   
   2. 在"高级设置"中，取消勾选"页面组件的渲染框架由Vue2升级为Vue3"开关。
      图6取消选中   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987234061.png "点击放大") 
   
   
   
   
5. 在应用设计器中，选择"界面"，单击高级页面后的"+"，新建一个高级页面。
6. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987508073.png)，从"全部 \> 自定义"中拖拽widgetdemoi18n组件到右侧画布中。
   
   图7拖拽组件到画布   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953348484.png "点击放大")
   
   
7. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987405849.png)，保存高级页面，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987246093.png)，发布高级页面。
8. 发布成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953326682.png)，预览效果。
   
   切换环境语言，在不同语种下，在页面中选中Widget，会在右侧显示该组件的属性配置面板，查看组件属性是否符合预期。