Excel JS React开发生产环境如何配置使用不同manifest文件

你可以按以下流程配置，不需要额外维护复杂的环境切换逻辑，本地调试和Azure部署可以完全隔离：

• 首先修正webpack配置里的生产环境地址：找到webpack.config.js顶部的地址定义，把urlProd的值从默认的localhost改成你Azure服务的实际部署根地址，示例：

const urlDev = "https://localhost:3000/";
const urlProd = "https://your-custom-addin-name.azurewebsites.net/"; // 替换为你自己的Azure站点地址

• 配置webpack按构建环境自动选择对应清单文件：还是在webpack.config.js里，找到负责复制静态资源的CopyWebpackPlugin配置段，把原来写死复制manifest.xml的规则改成按环境变量判断读取源文件，输出到dist目录时统一命名为manifest.xml，避免后续部署/调试时还要改文件名，示例配置：

// 配置文件顶部加两个清单的路径定义
const devManifestPath = "./manifest.xml";
const prodManifestPath = "./manifest_prod.xml";

// 找到plugins数组里的CopyWebpackPlugin配置，替换manifest相关规则
new CopyWebpackPlugin({
  patterns: [
    {
      from: process.env.NODE_ENV === "production" ? prodManifestPath : devManifestPath,
      to: "manifest.xml"
    },
    // 其余原有静态资源复制规则（比如图标、html文件、静态资源等）保持不变即可
  ]
})

• 提前校验两个清单文件的内部地址：
  • 开发用manifest.xml里所有涉及资源地址的节点（包括SourceLocation、图标地址、接口权限域名、任务页地址等），全部使用https://localhost:3000/作为根路径
  • 生产用manifest_prod.xml里对应的所有地址，全部替换为Azure站点的根路径，写完可以全局搜索文件里的localhost关键词，避免漏改导致部署后加载项显示空白、报资源无法访问的错误——这是很多人第一次配的时候最容易踩的坑。
• 调整package.json里的脚本命令，实现一键切换环境：

{
  "scripts": {
    "start": "office-addin-debugging start manifest.xml dev",
    "build": "webpack --mode development",
    "build:prod": "set NODE_ENV=production&& webpack --mode production",
    "deploy": "npm run build:prod && 你原有部署到Azure的执行命令"
  }
}

日常使用说明 #

• 本地迭代调试时，直接执行npm start即可，会自动启动本地3000端口开发服务器，自动旁加载开发版清单到Office客户端，支持热更新
• 代码验证完成要部署时，执行npm run deploy，会自动读取生产版清单打包，所有资源路径自动指向Azure地址，把dist目录产物全量上传到Azure服务即可
• 如果需要本地模拟生产环境效果，可以先把最新代码部署到Azure，再直接旁加载dist目录下生成的生产版manifest即可，不需要修改任何配置

注意：如果是Mac/Linux环境，build:prod命令里的设置环境变量语法要改成export NODE_ENV=production&& webpack --mode production，或者跨平台用cross-env包设置环境变量避免系统兼容问题。

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