3.2.5本地开发配置

本地开发配置

本小节将介绍如何在本地开发及调试。

1. 定制响应数据

在没有内网无法访问 test 和 daily环境时，可以创建一个本地 js 来模拟响应数据。 另外，在智能中台配置意图的资源 ID 后，也可能存在 3-10 分钟的延迟，如不想等待，也可以使用该方法来模拟响应数据。

⚠ 需要注意的是，该方法比较危险，可能会因为数据结构不匹配而导致页面无法正常渲染。所以在使用该方法时，需要对数据结构有一定的了解。 其次，开启了模拟以后，就无法再使用真实的数据了，所以在开发过程中，需要时刻注意。必要的时候，通过isMock 来控制是否开启模拟。

在 .config/mock目录中，创建文件 chat.js，内容如下：

module.exports = {
  use: true,
  handler: (data) => {
    if (data.msg === 'hello') { // 'hello'表示用户的输入
      return {
        responses: [ // 对用户输入的'hello'后台做出的返回
          {
            data: {
              vpaUIResourceID: '1752828998961332224', // VPA平台会根据后台返回的`vpaUIResourceID`显示对应的卡片
              data: {
                extendParams: {},
                text: data.msg
              },
              modelID: 101 
            }
          }
        ]
      }
    }
  }
}

该代码需要默认导出一个对象，主要包括两个属性：

  • use
    boolean： 是否启用模拟数据。该属性为 true 时，才会启用模拟数据。方便在开发过程中，可以随时开启或关闭模拟数据。

  • handler
    data=>unkown|response：处理函数。该函数接收一个参数 data，该参数为向服务端发送的整个数据（可以通过network 面板查看）。 可以根据 data 的不同，返回不同的结果。如果返回结果中没有 responses，或者 responses 为空数组，则不会进行模拟，而是使用真实的数据。

下图为后台返回的数据 开发中后台返回的数据

⛱ 其中，use为true时，才会启用模拟数据。 如果返回结果中没有responses，或者 responses 为空数组，则不会进行模拟，而是使用真实的数据。

responses 为模拟的响应数据，可以有多个。 responses 中的数据结构，需要拟合后端返回的数据结构。

⛱ 如果 vpaUIResourceID 暂时没有的话，可以先任意填写一个，例如 xxx ，然后配置好映射也可以快速开发。

2. 本地开发拦截

在开发过程中，我们往往是先在本地开发，然后再发布到资源管理平台。如果还没有，可以先任意写一个，然后仍然在模拟响应的文件中配置：

在 .config/mock/devMap.js，中，增加内容如下：

module.exports = {
  '1737189330811617283': '@remote/xxx',
  'xxx': '@remote/xxx'
}

该文件中，导出了一个对象，用于配置本地开发拦截。该对象的 key 为资源 ID，value 为该资源需要加载的本地开发组件的路径（以 @remote 开头，相对于 src 目录）。

这样就可以先不走资源管理平台，直接加载本地的开发组件。

⛱需要注意的是，键的类型是 string，资源 ID 往往长得像数字，但是实际上应该加上引号，按字符串处理。

⛱ 如果开发完成并且打包发布到资源管理平台后，可以将该字段删除或者注释掉，进而可以测试资源管理平台的资源加载。

到这一步假如开发的卡片不需要调用用友内部的资源，则就可以在本地调试了。

3. 模拟 vpa.notify 回调数据

在开发过程中，如果需要调友有空间的资源，例如通知则会用到本小节内容，使用 vpa.notify 向宿主环境发送一些通知进行通信。

在绝大多数的时候，可能还需要在通知后获得结果。但是在开发过程中，我们无法获得宿主环境的返回结果，这时候我们可以使用以下方法模拟返回结果。

在项目 .config/mock 目录中，创建一个名为 notify.js 的文件，内容如下：

module.exports =  {
    signType: 'diworkSignSucess',
    message: '2020-10-10 10:10:10'
  }

这样，当我们使用 vpa.notify 时，就会返回这个结果。

如果需要根据不同的 action 模拟一些逻辑，可以返回一个函数。下面是一个例子：

module.exports = function (option) {

  const ret = {
    signType: 'diworkSignSucess',
    message: '2020-10-10 10:10:10'
  }

  const ret2 = {
    signType: 'diworkSignError',
    message: '外勤'
  }

  return Math.random() > 0.5 ? ret : ret2
}

其中，option 参数为 vpa.notify 的参数，ret 为模拟的返回结果。可以根据 option 参数的不同，返回不同的结果。

当您不再需要模拟返回数据时，可以在 .config/mock 目录中删除 notify.js 文件。

4. 手动设置配置信息

由于登录友空间需要token，本地调试我们可以自行配置，配置方式如下：

1）新建配置文件

在项目根目录下的 .config 目录中，新建一个配置文件。

文件名可以随意，假设叫做 prod-xxx.ts，后缀需要是 .ts 。 文件内容如下:

export default {
"host": "https://c2.yonyoucloud.com",
"yhtAccessToken": "xxx" // 可以从工作台 网站控制台获取
}

需要注意：可能存在多个 yht_access_token ，注意是目标域名即可。

2）使用配置文件

在项目根目录下的 .env.local 文件中，添加如下配置：

REACT_APP_INIT_CONFIG=prod-xxx

⚠ 注意：配置文件名不需要带后缀，只需要填写文件名即可。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24