angularjs - 在 yeoman Angular 应用程序中使用 bower 时，我可以更改渲染的路径吗？

Question

我在我的 Angular 应用程序中使用 html5mode，但是当我运行 bower install 时与 grunt ，它将路径呈现为
<script src="bower_components/...
我可以将其更改为
<script src="/bower_components/... ?

我添加了 <base href="/">标记到我的<head/>部分，但是当我的页面尝试加载 javascript 时，他们仍在寻找相对 url。

所以对于 /bower_components/script.js 的脚本，目前呈现为<script src="bower_components/script.js"></script> ,

何时开启 /login ，页面尝试加载 /login/bower_components/script.js
编辑
按照@sharpper 的建议，我添加了下面的代码块，并在 Gruntfile.js 中结束了这个:

// Automatically inject Bower components into the app
'bower-install': {
  app: {
    html: '<%= yeoman.app %>/index.html',
    ignorePath: '<%= yeoman.app %>/',
    fileTypes: {
      html: {
        block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
        detect: {
          js: /<script.*src=['"](.+)['"]>/gi,
          css: /<link.*href=['"](.+)['"]/gi
        },
        replace: {
          js: '<script src="/{{filePath}}"></script>', // <-- Change this line
          css: '<link rel="/stylesheet" href="{{filePath}}" />'
        }
      },
      yml: {
        block: /(([\s\t]*)#\s*bower:*(\S*)\s*)(\n|\r|.)*?(#\s*endbower\s*)/gi,
        detect: {
          js: /-\s(.+)/gi,
          css: /-\s(.+)/gi
        },
        replace: {
          js: '- {{filePath}}',
          css: '- {{filePath}}'
        }
      }
    }
  }
},

它仍然可以正确编译，但文件呈现相同。

Answer 1

首先，确保您的 bower 安装在最新版本:v0.8.0(yeoman 目前使用的是 v0.7.0)，然后下面的代码应该可以工作:

     'bower-install': {
         app: {
            src: ['<%= yeoman.app %>/index.html'],
            ignorePath: '<%= yeoman.app %>/',
            fileTypes: {
                html: {
                    replace: {
                        js: '<script src="/{{filePath}}"></script>',
                        css: '<link rel="stylesheet" href="/{{filePath}}" />'
                    }
                }
            }
        }
     }

如果您不想更新或此方法不起作用，请尝试以下技巧:
更改 ignorePath: '<%= yeoman.app %>/',至 ignorePath: '<%= yeoman.app %>', ，那么它应该可以满足您的目的。