Question

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

将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的自定义构建块，这样它就可以使用＆＃34;＆＃34;在开发过程中（或者你在那里设置的任何东西）和生产构建块配置的值。

Answer 2

请read here。我避免使用基本标签。要解决你遇到的问题（我也有），请做两件事：

在index.html中将所有js / css路径指定为与index.html路径的关系，因此它适用于prod / dev

编写一个http拦截器，在加载html / api调用时将基地追加到url

myapp.factory('MyHttpInterceptor',[ "$log", function ($log) {

    var requestInterceptor = function (config) {
        var prefix = document.location.pathname.substring(0, document.location.pathname.length - 1);
        if (config.url.indexOf(".html") !== -1) {
            config.url = prefix + config.url;
        }
        if (config.url.indexOf("/api/") !== -1) {
            config.url = prefix + config.url;
        }
        return config || $q.when(config);
    };

    return {
        request: requestInterceptor,
    };
}
  ]);

Answer 3

在内部标题<base href="/your MainDomain Name">

中使用

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <base href="/your MainDomain Name">
</head>

如何为grunt构建设置<base />元素？

3 个答案: