Question

我希望在我的Angular 2应用程序中为开发和生产提供不同的基础href。

我已经看到了与此问题类似（并且有些相同）的问题的答案。

这里最好的答案总结了在这些问题的所有答案中重复的2个解决方案：

Set base href from an environment variable with ng build

我试过了两个，每个都有自己的问题：

1）APP_BASE_HREF - 不适用于js / css文件。例如，当尝试请求app / someroute / 1时，它会尝试从app / someroute / 1而不是app中请求js和css文件。

2）修改ngOnInit中的基本href - 在调用ngOnInit时，已经请求了js和css文件，因此修改后的基本href不适用于init上加载的文件，仅适用于请求的文件之后（这对我没有帮助）。

到目前为止，对我来说唯一有效的方法是在每次编译后手动修改html以进行生产，但我试图自动化它。

可能的解决方案：

1）在请求js和css文件之前更改基本href - 有没有办法做到这一点？他们基本上在页面加载时立即请求。可能在链接rel之前添加一个在head中执行的脚本？

2）使用不同的基本href值编译dev和production的不同HTML，例如使用某种非常轻量级的html模板引擎，它不会成为一种过度杀伤。

您怎么看？

Answer 1

我发现那里有一个cli选项（社区要求）--base-href。

我只是为这样的生产而建造：

ng build --prod --base-href = / prod_dir /

Answer 2

我使用Gulp 4任务使用Angular-cli自动构建应用程序。 gulp任务将运行cli命令来构建应用程序并传入适当的值以用于基本标记。我还使用此任务将文件部署到服务器（使用gulp-rsync）。

以下是我的gulpfile中的一些片段：

const spawn = require('child_process').spawn;
const environment = process.env.NODE_ENV || 'staging';

if (environment === 'development') {
  console.log('No deploys performed for development environment.');
  process.exit(0);
}

gulp.task('build', gulp.series(build));

function build(done) {
  var cmd = spawn('ng', ['build', '--target=production', '--environment=' + environment, '--base-href=/app/'], {stdio: 'inherit'});
  cmd.on('close', function (code) {
    console.log('Build task exited with code: ' + code);
    done(code);
  });
}

来自环境变量的Angular 2 base href

2 个答案: