React框架下Office Add-in任务窗格项目无法在Outlook应用区显示

一、问题成因 #

• 清单扩展点配置缺失：React模板生成的manifest.xml默认可能未配置Outlook对应场景（如邮件阅读/撰写）的可见扩展点，仅注册了自定义加载项区域，导致应用区无显示入口。
• 本地服务未正常运行：React项目依赖本地开发服务器提供任务窗格资源，若服务未启动或URL配置错误，Office客户端无法加载任务窗格，会自动隐藏应用区入口。
• 客户端缓存冲突：之前添加的非React版加载项缓存未清理，与React版manifest产生配置冲突，导致显示异常。

二、正确配置React版Office Add-in的步骤 #

1. 检查并修正manifest.xml的扩展点配置 #

打开项目根目录的manifest.xml，确保添加对应Outlook场景的扩展点：

示例：添加邮件阅读场景的任务窗格扩展点

<ExtensionPoint xsi:type="MessageReadCommandSurface">
  <OfficeTab id="TabDefault">
    <Group id="msgReadGroup">
      <Label resid="GroupLabel"/>
      <Control xsi:type="Button" id="msgReadOpenPaneButton">
        <Label resid="TaskpaneButtonLabel"/>
        <Supertip>
          <Title resid="TaskpaneButtonTitle"/>
          <Description resid="TaskpaneButtonDesc"/>
        </Supertip>
        <Icon>
          <bt:Image size="16" resid="Icon.16x16"/>
          <bt:Image size="32" resid="Icon.32x32"/>
          <bt:Image size="80" resid="Icon.80x80"/>
        </Icon>
        <Action xsi:type="ShowTaskpane">
          <SourceLocation resid="Taskpane.Url"/>
        </Action>
      </Control>
    </Group>
  </OfficeTab>
</ExtensionPoint>

同时确认Resources节点下的URL指向正确的本地服务地址（默认是https://localhost:3000/taskpane.html）：

<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>

2. 确保本地开发服务正常运行 #

在React项目根目录执行命令启动服务：

npm start

等待服务启动完成，确认浏览器能正常访问https://localhost:3000/taskpane.html（注意是HTTPS协议，若出现证书警告，需在浏览器中信任该证书）。

3. 清理Office客户端缓存并重新添加manifest #

• 关闭所有Outlook客户端窗口
• 执行以下命令清除加载项缓存（Windows系统）：

del /s /q %LOCALAPPDATA%\Microsoft\Office\16.0\Wef\*

• 重新打开Outlook，删除旧的加载项，再重新添加React项目的manifest.xml

4. 验证加载项显示 #

添加完成后，打开任意一封邮件，检查顶部菜单栏的应用区域是否出现你的加载项按钮。

内容的提问来源于stack exchange，提问作者Harsh