如何为React版MS Office加载项配置URL前缀（支持本地与生产环境）

1. 配置React基础路径（兼容开发/生产环境） #

在项目根目录的package.json中设置homepage字段，结合环境变量实现多环境适配：

{
  "homepage": "%PUBLIC_URL%/plan"
}

• 开发环境：创建.env.development文件写入环境变量，避免每次启动手动输入：

  PUBLIC_URL=/plan
  

  启动命令保持npm start即可，开发服务器会自动将前缀/plan加入资源路径。
• 生产环境：直接执行npm run build，构建后的文件会自动基于部署域名带上/plan前缀（例如部署到https://your-domain.com时，资源路径会变为https://your-domain.com/plan/xxx）。

2. 更新Office加载项Manifest配置 #

找到项目中的manifest.xml（通常在public或manifest目录下），修改所有涉及URL的字段：

• 开发环境示例：

  <SourceLocation DefaultValue="http://localhost:3000/plan/taskpane.html" />
  <IconUrl DefaultValue="http://localhost:3000/plan/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="http://localhost:3000/plan/assets/icon-128.png" />
  

• 生产环境示例：

  <SourceLocation DefaultValue="https://your-production-domain.com/plan/taskpane.html" />
  <IconUrl DefaultValue="https://your-production-domain.com/plan/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://your-production-domain.com/plan/assets/icon-128.png" />
  

建议复制两份manifest文件分别命名为manifest.dev.xml和manifest.prod.xml，切换环境时直接使用对应文件即可。

3. 适配React路由（若使用react-router） #

如果项目依赖react-router-dom，需要为路由容器设置basename，确保所有路由自动带上/plan前缀：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/plan">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

4. 验证配置 #

• 开发环境：启动项目后访问http://localhost:3000/plan/taskpane.html，确认页面正常加载，再在Office应用中加载插件验证功能。
• 生产环境：将构建后的build文件夹部署到服务器的/plan路径下，访问生产URL验证插件加载和功能正常。

内容的提问来源于stack exchange，提问作者Muhammad Haroon Iqbal