javascript - 根据环境在angularjs项目中设置基本URL

Question

我正在处理一个使用 Yeoman 创建的 AngularJs 项目。该项目使用 Grunt 作为任务管理器。

在我的 index.html 中，我需要设置基本 url:

<base href="/">

href 属性值取决于环境:如果环境是开发环境，我希望 href 只是 /，如果环境是生产环境，则该值必须是其他东西 a/b/c。

这个问题有哪些可用的解决方案？

可以使用 AngualrJs 中的常量在运行时动态设置它，还是最好在构建/服务时静态设置它？

Answer 1

我个人更喜欢将其设置为构建/服务时间，这样我就不需要在更改环境时更改代码。

所以，我可以在服务器上推送并使用 grunt serve:production - 你不需要更改代码，所以你可以使用 git hooks 和 bash 脚本轻松地为你的代码提供服务.

要在 Grunt 中实现这一点，您可以使用 ngcostant .你定义你想要的变量，它会创建一个名为 config.js 的文件(或任何你想要的)，使用 .configure()

谈到你的情况，你可以在你的 Gruntfile 中有这样的东西:

ngconstant: {
  options: {
    space: ' ',
    wrap: '"use strict";\n {%= __ngModule %}',
    name: 'config'
  },
  vagrant: {
    options: {
      dest: 'app/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'vagrant',
        baseUrl: 'http://192.168.33.99/api/v0',
      }
    }
  },
  test: {
    options: {
      dest: 'app/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'test',
        baseUrl: 'http://test.example.com/api/v0',
      }
    }
  },
}

然后，在您的应用中，您可以使用 ENV.baseUrl 获取 baseUrl 并将其暴露给您的 html 文件，如下所示( Angular ):

app.run(function($rootScope, ENV.baseUrl){   
    $rootScope.baseUrl = config.baseUrl;
});

(html)

<base ng-href="{{baseUrl}}">

因此，当您使用 vagrant 时，您可以使用 grunt serve:vagrant 为您的应用程序提供服务，或者当您想在测试服务器上运行时，您可以使用 grunt serve:test 为您的应用程序提供服务