AngularJS项目能否动态重载配置？无需NPM构建修改API地址

你的问题很典型——当配置被打包进构建产物后，确实没法直接修改。要实现无需npm构建就能改配置，核心思路是把配置文件从打包bundle里抽出来，做成独立的全局可访问脚本，具体步骤如下：

1. 重构appConfig.js为全局变量 #

把原来的ES模块导出改成挂载到window对象上，这样它就不会被打包进你的应用bundle，而是作为独立的静态文件存在：

// appConfig.js
window.appConf = { 
  BASE_URL: 'http://demo:1817', 
  API_BASE_URL: 'http://demo:1817/api' 
};

2. 在index.html中提前加载配置文件 #

确保appConfig.js在AngularJS和你的应用脚本之前加载，这样Angular初始化时能拿到全局配置：

<!-- index.html -->
<script src="appConfig.js"></script>
<script src="angular.min.js"></script>
<script src="dist/index.bundle.js"></script> <!-- 你的构建后脚本 -->

3. 修改Angular模块的配置注入 #

不再通过ES模块import配置，而是直接取window上的全局变量注入为constant：

// index.js
angular.module('app', [])
  .constant('appConf', window.appConf)
  .run(function(){ 
    //do something 
  });

4. 服务中的调用代码无需改动 #

原来的服务调用逻辑完全保留即可，因为appConf依然是通过Angular的constant注入的：

// 服务代码
$http.get(appConf.API_BASE_URL + "/something").then(resp => { 
  //do someelse 
});

关键注意事项 #

• 如果使用Webpack等构建工具，要确保appConfig.js被复制到构建输出目录（比如dist），而不是被打包进bundle。可以用copy-webpack-plugin来配置：

  // webpack.config.js示例
  const CopyPlugin = require('copy-webpack-plugin');
  module.exports = {
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: 'appConfig.js', to: './' },
        ],
      }),
    ],
  };
  

• 部署时，直接修改dist/appConfig.js里的URL，刷新页面就能生效，完全不用重新构建项目。

这样改造后，演示环境频繁变动URL的问题就彻底解决啦！

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