vue项目pc端页面使用企微-Web登录组件实现企业微信扫码登录

项目场景：

因企业微信改版，原先使用会话存档可以在页面直接展示聊天记录，改版后无法直接获取聊天记录。需要使用企微提供的“会话展示组件”。而要使用这个组件的前提，必须使用“ Web 登录组件”进行登录

企微API地址：https://developer.work.weixin.qq.com/document/path/99536

---

记录一下从安装到展示会话，遇到的问题，方便后续查找

使用npm安装@wecom/jssdk 报错：

会话展示组件环境要求是
企业微信 2.8.10 及以上版本；
@wecom/jssdk 2.0.1 以上版本；
Web登录组件环境要求
@wecom/jssdk >=1.3.1
所以使用了npm安装导入，npm install @wecom/jssdk 安装的是2.1.0，页面上直接import * as ww from '@wecom/jssdk’之后，就报错了，报错如下

官方给的方法如下：

搜索了一堆支持babel可选链操作符?.的方法，大多是添加@babel/plugin-proposal-optional-chaining插件
步骤方法：
但我安装后，又跳出babel其他错误（找不到@babel/core、版本错误、babel插件有6版本和7版本，有语法冲突等）。又度娘了一大堆，结果是如果不升级到7版本，现有的6版本babel根本无法支持支持babel可选链操作符?.。考虑到项目已经在正式运行中，如果升级的话代表着我很可能需要将一大堆关联插件升级，太麻烦了，而且万一一不小心，我就emmm…

---

最后方案：

将源码下载了下来，内容的所有可选链操作符?.都改成了等效的传统写法来替代

修改完毕，重新引入，不再报错了。如果有大佬知道其他更有效的解决方案建议，将不胜感激。

注意点：

引入官方https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js时，一定要在index.html中引入，不能在单页面组件内引入。不然通过登录组件，扫码登录之后，展示会话组件时，结果又陷入一轮congfig出错的漩涡…

以下为代码参考：

initWWLoginPanel(){
   
    let that = this;
    wechatZoneApi.getCurrentUserProgramInfo({
   }).then(res => {
   
        const userProgramInfo = res.obj;
        console.log(userProgramInfo.webRedirectUri)
        // 初始化登录组件
        const wwLogin = ww.createWWLoginPanel({
   
          el: '#ww_login',
          params: {
   
            login_type: 'CorpApp',//CorpApp企业自建应用登录、服务商代开发应用登录 ServiceApp第三方应用登录
            appid: userProgramInfo.appid,
            agentid: userProgramInfo.agentId,
            redirect_uri: userProgramInfo.webRedirectUri,
            state: 'loginState',
            redirect_type: 'callback',
          },
          onCheckWeComLogin({
     isWeComLogin }) {
   
            console.log('登录组件onCheckWeComLogin',isWeComLogin)
          },
          onLoginSuccess({
     code }) {
   
            console.log('登录组件onLoginSuccess',