通过


使用 Visual Studio Code 开发 Office 加载项

本文介绍如何使用 Visual Studio Code (VS Code) 开发 Office 加载项。

先决条件

使用 VS Code 开发加载项

若要使用项目,请使用 VS Code 打开项目的根文件夹。

这两种工具都创建功能有限的基本加载项。 你可通过在 VS Code 中编辑清单HTML、JavaScript/TypeScript 和 CSS 文件,自定义该加载项。 要简要了解 Yeoman 生成器创建的加载项项目中的项目结构和文件,请查看 5 分钟快速入门中与你创建的加载项类型相对应的 Yeoman 生成器指南。

测试和调试加载项

测试、调试和排查 Office 加载项问题的方法因平台和用于创建项目的工具而异。 有关详细信息,请参阅 测试和调试 Office 外接程序 和使用 Microsoft 365 代理工具包创建 Office 外接程序项目

发布加载项

Office 加载项包括两个基本组件:清单文件和你自己的 Web 应用程序。 此清单定义各种设置,包括将外接程序与 Office 客户端集成的方式。 Web 应用程序提供 HTML、JavaScript 和其他文件,这些文件提供加载项的功能和 UI。

开发加载项时,可在本地 Web 服务器 (localhost) 上运行加载项,但如果已准备好发布该加载项供其他用户访问,则需要将 Web 应用程序部署到 Web 服务器或 Web 托管服务(例如 Microsoft Azure),并更新清单以指定所部署的应用程序的 URL。

如果加载项如期工作且你已准备好发布它供其他用户访问,请完成以下步骤。

  1. 通过命令行,在加载项项目的根目录中运行以下命令,准备所有文件供生产部署使用。

    npm run build
    

    生成完成后,加载项项目的根目录中的 dist 文件夹将包含要在后续步骤中部署的文件。

  2. dist 文件夹的内容上传到要托管你的加载项的 Web 服务器。 可使用任意类型的 Web 服务器或 Web 托管服务来托管加载项。

  3. 在 VS Code 中,打开位于项目的根目录中的外接程序清单文件。 将所有出现的 https://localhost:3000 都替换为上一步中已部署到 Web 服务器的 Web 应用程序的 URL。

  4. 选择要用于 部署 Office 外接程序的方法,并按照说明发布加载项。

另请参阅