angularjs - 如何为 grunt build设置 <base> 元素？

Question

我正在构建的最终应用程序将位于服务器上的/subdirectory 中。

将 angularjs 的 html5mode 设置为 true，这样我就可以丢失 # 符号了。但是我还需要设置

<base href="/subdirectory/"></base>

在开发过程中，我无法设置 'base' 元素，因为当我运行 grunt serve 服务器找不到大部分文件时。

当我执行 grunt build 时，开发然后可能设置 'base' 元素的最佳方法是什么？

谢谢。

Answer 1

我使用了 grunt 任务 usemin:

index.html

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

Gruntfile.js

usemin: {
    html: ['<%= yeoman.dist %>/{,*/}*.html'],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    options: {
        dirs: ['<%= yeoman.dist %>'],
        blockReplacements: {
            base: function (block) {
                return ['<base href="', block.dest, '">'].join('');
            }
        }
    }
}

基本上我定义了一个名为 base 的自定义构建 block ，这样它在开发期间使用“”(或您在那里设置的任何内容)并在生产中使用来自构建 block 配置的值。