如何在react-scripts与create-react-app项目中使用office-addin-dev-certs

步骤1：安装依赖 #

首先将office-addin-dev-certs安装为开发依赖：

npm install office-addin-dev-certs --save-dev
# 或使用yarn
yarn add office-addin-dev-certs --dev

步骤2：安装并信任开发证书 #

运行以下命令自动生成、安装并适配Office加载项的本地证书（需要系统权限：macOS需输入密码，Windows需以管理员身份打开终端）：

npx office-addin-dev-certs install

执行成功后，命令行会输出证书和密钥的本地路径，示例如下：

Certificate installed successfully.
Key file: /Users/xxx/Library/Application Support/OfficeAddinDeveloperCertificates/localhost.key
Certificate file: /Users/xxx/Library/Application Support/OfficeAddinDeveloperCertificates/localhost.crt

步骤3：修改启动命令 #

将原启动命令替换为使用上述证书路径的版本，直接运行的命令示例：

PORT=8000 HTTPS=true SSL_CRT_FILE=/Users/xxx/Library/Application Support/OfficeAddinDeveloperCertificates/localhost.crt SSL_KEY_FILE=/Users/xxx/Library/Application Support/OfficeAddinDeveloperCertificates/localhost.key react-scripts start

（注：8000不属于系统特权端口（<1024），无需添加sudo，若之前用sudo是因为证书文件权限，可根据实际情况调整）

更便捷的方式：配置package.json脚本

为避免每次输入长路径，在项目package.json的scripts字段中添加自定义启动命令：

"scripts": {
  "start": "react-scripts start",
  "start:office": "PORT=8000 HTTPS=true SSL_CRT_FILE=$(npx office-addin-dev-certs cert --cert) SSL_KEY_FILE=$(npx office-addin-dev-certs cert --key) react-scripts start"
}

之后只需运行以下命令即可启动项目：

npm run start:office
# 或yarn
yarn start:office

步骤4：验证证书有效性 #

若Office客户端出现证书不信任问题，运行以下命令检查证书状态：

npx office-addin-dev-certs verify

若验证不通过，重新执行npx office-addin-dev-certs install即可修复。

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