如何在Office.js的manifest文件中用环境变量实现动态URL统一管理？

我是Office加载项开发新手，当前manifest代码里https://localhost:3000/重复出现多次，想把该URL统一存储，修改时所有引用处自动同步，无需逐一修改。

方法一：使用XML实体（原生XML支持，无需额外工具） #

XML本身支持实体定义，可以在manifest文件开头定义一个基础URL实体，之后所有引用该URL的地方都用实体名代替，修改时只需要改实体的值即可。

步骤： #

1. 在XML声明后添加实体定义：

<!DOCTYPE OfficeApp [
    <!ENTITY baseUrl "https://localhost:3000">
]>

2. 将所有原本写https://localhost:3000的地方替换为&baseUrl;，比如&baseUrl;/assets/Favicon-36px.jpg、&baseUrl;/taskpane.html等。

修改后的完整Manifest代码： #

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE OfficeApp [
    <!ENTITY baseUrl "https://localhost:3000">
]>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
  <Id>083aced0-1978-4026-bfb3-86e91ecdf2ec</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Test Excel Add-in</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="Test Excel Addin" />
  <Description DefaultValue="A template to get started." />
  <IconUrl DefaultValue="&baseUrl;/assets/Favicon-36px.jpg" />
  <HighResolutionIconUrl DefaultValue="&baseUrl;/assets/Favicon-36px.jpg" />
  <SupportUrl DefaultValue="https://test.zendesk.com/hc/en-us" />
  <AppDomains>
    <AppDomain>https://demo.test.test</AppDomain>
    <AppDomain>https://test.test-const.net</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="&baseUrl;/taskpane.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Workbook">
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title" />
            <Description resid="GetStarted.Description" />
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl" />
          </GetStarted>
          <FunctionFile resid="Commands.Url" />
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="CommandsGroup">
                <Label resid="CommandsGroup.Label" />
                <Icon>
                  <bt:Image size="16" resid="Icon.16x16" />
                  <bt:Image size="32" resid="Icon.32x32" />
                  <bt:Image size="80" resid="Icon.80x80" />
                </Icon>
                <Control xsi:type="Button" id="TaskpaneButton">
                  <Label resid="TaskpaneButton.Label" />
                  <Supertip>
                    <Title resid="TaskpaneButton.Label" />
                    <Description resid="TaskpaneButton.Tooltip" />
                  </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">
                    <TaskpaneId>ButtonId1</TaskpaneId>
                    <SourceLocation resid="Taskpane.Url" />
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="&baseUrl;/assets/Favicon-36px.jpg" />
        <bt:Image id="Icon.32x32" DefaultValue="&baseUrl;/assets/Favicon-36px.jpg" />
        <bt:Image id="Icon.80x80" DefaultValue="&baseUrl;/assets/Favicon-36px.jpg" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
        <bt:Url id="Commands.Url" DefaultValue="&baseUrl;/commands.html" />
        <bt:Url id="Taskpane.Url" DefaultValue="&baseUrl;/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Get started with test Add-in" />
        <bt:String id="CommandsGroup.Label" DefaultValue="Commands Group" />
        <bt:String id="TaskpaneButton.Label" DefaultValue="test" />
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue="test Add-in Loaded Successfully" />
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="test Add-in Taskpane" />
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

方法二：使用构建工具（适合多环境切换） #

如果需要区分开发、测试、生产等不同环境的URL，建议用构建工具（如Webpack、Vite）配合环境变量来实现：

步骤： #

1. 创建环境配置文件，比如.env.development：

BASE_URL=https://localhost:3000

以及.env.production：

BASE_URL=https://your-production-domain.com

2. 将Manifest文件作为模板，把所有URL替换为占位符，比如{{BASE_URL}}/assets/Favicon-36px.jpg。
3. 在构建流程中添加替换插件，比如用Webpack的ReplacePlugin或Vite的vite-plugin-replace，构建时根据当前环境替换占位符为对应环境变量的值。

这样在不同环境构建时，会自动生成对应URL的Manifest文件，无需手动修改。

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