Question

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

在我的index.html中，我需要设置基本网址：

<base href="/">

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

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

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

Answer 1

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

因此，我可以推送服务器并使用grunt serve:production - 您无需更改代码，因此您可以使用git hooks和bash脚本轻松地为您的代码提供服务。

要在Grunt中实现此目的，您可以使用ngcostant。您可以定义所需的变量，并使用ENV

创建一个名为config.js（或任何您想要的）的文件，在.configure()（或任何您想要的）下公开您的变量

谈到你的情况，你可以在你的Grunt文件中有这样的东西：

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文件，如下所示（角度）：

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

（HTML）

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

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

Answer 2

尝试grunt template package：

可以使用提供的模板手动处理模板字符串功能

此软件包提供默认分隔符，即。 <%= placeholder %>要替换占位符中的变量值，并使用Grunt。

另一个包grunt-processhtml为进程html提供了特殊注释：

<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->

有关如何在HTML文件中使用的示例：

<!-- build:remove:staging,prod -->
  <base href="/app/public/" target="_blank" />
<!-- /build -->

在制作过程中，您可以执行以下操作：

<!-- build:[href] a/b/c -->
  <base href="/app/public/" target="_blank" />
<!-- /build -->

<!-- will be changed to -->
<base href="a/b/c/" target="_blank" />

Answer 3

我的方法是根本不包含任何其他依赖项（yeoman已经足够了）。我只是使用Expected identifier的{{1}}功能，并在我的blockReplacement任务中添加了usemin目标。

这允许我使用dev进行生产分发，build用于开发分发（远程）和grunt build用于正常的本地开发。

在我的grunt build:dev：

中

grunt serve

在我的html：

中

<!-- build:baseUrl /somepath/ -->
<base href="/">
<!-- endbuild -->

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

3 个答案: