生产构建时修改remoteServiceBaseUrl，如何按环境配置remoteServiceBaseUrl/appBaseUrl

当然可以！针对不同环境（开发、测试、生产等）分别配置这两个参数是前端项目部署里非常常见的需求，下面给你分享几种实用的实现思路：

1. 利用框架自带的环境变量机制（推荐） #

大多数现代前端框架（Vue、React、Angular等）都原生支持环境变量区分配置，不用自己造轮子：

• 比如在Vue项目中，你可以在根目录创建多个环境配置文件：
  • .env.development（开发环境）：

    VUE_APP_REMOTE_SERVICE_URL=http://dev-api.yourdomain.com
    VUE_APP_BASE_URL=/dev-app/
    

  • .env.production（生产环境）：

    VUE_APP_REMOTE_SERVICE_URL=http://prod-api.yourdomain.com
    VUE_APP_BASE_URL=/prod-app/
    

• 然后在你的appconfig.json或者直接在代码中读取这些变量：

  {
    "remoteServiceBaseUrl": process.env.VUE_APP_REMOTE_SERVICE_URL,
    "appBaseUrl": process.env.VUE_APP_BASE_URL
  }
  

• 构建时只需执行对应环境的命令，比如npm run build:prod，框架会自动注入对应环境的变量值。

2. 多配置文件 + 构建脚本切换 #

如果你的项目没有用框架自带的环境变量，也可以手动维护多份配置文件：

• 在src/assets下创建appconfig.dev.json、appconfig.test.json、appconfig.prod.json，每个文件写入对应环境的URL配置。
• 然后在package.json的scripts中添加不同环境的构建命令：

  "scripts": {
    "build:dev": "cp src/assets/appconfig.dev.json src/assets/appconfig.json && npm run build",
    "build:test": "cp src/assets/appconfig.test.json src/assets/appconfig.json && npm run build",
    "build:prod": "cp src/assets/appconfig.prod.json src/assets/appconfig.json && npm run build"
  }
  

• 构建对应环境时，执行对应的命令即可自动替换默认的appconfig.json，再完成构建打包。

3. 运行时动态加载配置（适合需灵活切换环境的场景） #

如果希望同一个构建包能适配多个环境，不用重新构建，可以在项目启动时动态加载配置：

• 先把不同环境的配置文件都放到静态资源目录，然后在项目入口文件（比如main.js）中根据当前环境标识（比如域名、URL参数）判断加载哪个配置：

  let configFileName = 'appconfig.prod.json';
  // 比如根据当前域名判断环境
  if (window.location.host.includes('dev.')) {
    configFileName = 'appconfig.dev.json';
  } else if (window.location.host.includes('test.')) {
    configFileName = 'appconfig.test.json';
  }
  
  // 动态加载配置文件
  fetch(`/assets/${configFileName}`)
    .then(res => res.json())
    .then(config => {
      // 将配置挂载到全局或状态管理中供项目使用
      window.appGlobalConfig = config;
    });
  

• 这种方式的好处是一次构建，多环境复用，只需在不同服务器上放置对应的配置文件即可。

小提示 #

• 如果用环境变量的方式，注意不同框架对变量名的要求（比如React要求变量前缀是REACT_APP_）；
• 记得把默认的appconfig.json加入.gitignore，避免提交本地开发配置到仓库。

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