根据环境在angularjs项目中设置base 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() 在 ENV（或任何您想要的）下公开您的变量

谈到你的情况，你可以在你的 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 文件，如下所示（角度）：

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

(html)

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

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

Answer 2

试试grunt template package:

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

此包提供默认分隔符，即。 <%= placeholder %> 替换占位符中的变量值，给定您正在使用的 Grunt。

另一个包，grunt-processhtml 提供带有特殊 cmets 的进程 html：

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

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

<!-- 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 已经足够了）。我只是使用了usemin 的blockReplacement 功能，并将dev 目标添加到我的build 任务中。

这让我可以使用grunt build 进行生产分发，grunt build:dev 用于开发分发（远程），grunt serve 用于正常的本地开发。

在我的html:

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

在我的Gruntfile.js：

...

var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist',
    dev: false // added dev boolean at ~ line 22
};

...

assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],

    // added blockReplacements at ~ line 250
    blockReplacements: {
        baseUrl: function (block) {
            if (appConfig.dev) {
                return ['<base href="', block.dest, '">'].join('');
            }
        }
    }

...

// Altered the default build task to accept a target
grunt.registerTask('build', 'Compile the code base for distribution', function (target) {
    if (target === 'dev') {
        appConfig.dev = true;
    }

    grunt.task.run([
        'clean:dist',
        'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin'
    ]);
});