Office AddIn如何根据构建环境动态设置serverUrl等变量

以下三种方案均可实现环境URL动态切换，可根据你的项目构建配置和业务需求选择：

方案1：构建工具环境变量注入（最推荐，通用性最强） #

主流构建工具（Vite/Webpack）都原生支持环境变量注入，是前端项目区分环境的标准实现方式：

如果你用Vite构建 #

• 项目根目录新增3个环境配置文件：
  • .env.development（开发环境用）：写入VITE_SERVER_URL=https://dev.myorganisation.com/api/atlas
  • .env.acc（验收环境用）：写入VITE_SERVER_URL=https://acc.myorganisation.com/api/atlas
  • .env.production（生产环境用）：写入VITE_SERVER_URL=https://prod.myorganisation.com/api/atlas
• 修改taskpane.js中的serverUrl定义：

  let serverUrl = import.meta.env.VITE_SERVER_URL;
  let projectUrl = `${serverUrl}/projects/`;
  let wsReGeBo = `${serverUrl}/wms`;
  let mapUrl = `${serverUrl}/printconfig/printmap/[title]/[scale]/[lng]`;
  

• 修改package.json中的打包命令：

  "scripts": {
    "dev": "vite", // 本地开发自动读取dev环境配置
    "build:acc": "vite build --mode acc", // 打验收环境包
    "build:prod": "vite build --mode production" // 打生产环境包
  }
  

如果你用Webpack构建 #

• 安装dotenv-webpack插件，在webpack配置中根据打包模式加载对应.env文件
• 代码中用process.env.SERVER_URL读取变量，修改打包脚本传入不同模式参数即可

方案2：构建时全局字符串替换（无需修改现有业务代码） #

如果不想改动现有taskpane.js的代码结构，可以直接在构建阶段做静态字符串替换：

• 以Vite为例，安装vite-plugin-string-replace插件，在vite.config.js中新增如下配置：

  import { defineConfig } from 'vite'
  import replace from 'vite-plugin-string-replace'
  
  const serverUrlMap = {
    dev: 'https://dev.myorganisation.com/api/atlas',
    acc: 'https://acc.myorganisation.com/api/atlas',
    prod: 'https://prod.myorganisation.com/api/atlas'
  }
  
  export default defineConfig(({ mode }) => {
    return {
      plugins: [
        replace([
          {
            search: 'https://dev.myorganisation.com/api/atlas',
            replace: serverUrlMap[mode]
          }
        ])
      ]
    }
  })
  

• 打包时指定对应mode即可，原有业务代码不需要做任何修改
• Webpack项目可以用string-replace-loader或者DefinePlugin实现相同效果

方案3：运行时加载外部配置（打包后可灵活修改环境地址） #

如果需要打包部署后也能随时修改服务地址、不用重新构建，可以用外置配置文件的方案：

• 在项目public目录下新增config.json文件，不同环境部署时替换成对应配置即可：

  {
    "serverUrl": "https://acc.myorganisation.com/api/atlas"
  }
  

• 修改taskpane.js的初始化逻辑，先拉取配置再执行业务代码：

  async function initAddin() {
    // 先加载外置配置
    const configRes = await fetch('/config.json')
    const config = await configRes.json()
    // 初始化接口地址
    let serverUrl = config.serverUrl
    let projectUrl = `${serverUrl}/projects/`
    let wsReGeBo = `${serverUrl}/wms`
    let mapUrl = `${serverUrl}/printconfig/printmap/[title]/[scale]/[lng]`
    // 后续原有业务逻辑
  }
  initAddin()
  

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