在服务器端渲染上动态修改 <base> 标签答案

【问题标题】：Modify <base> tag dynamically on server side render在服务器端渲染上动态修改 <base> 标签
【发布时间】：2017-11-18 10:10:05
【问题描述】：

我正在寻找如何获取 HTML 页面的基本 url，以便来自浏览器的相对 url 请求使用该基本。

这就是答案 Defining root of HTML in a folder within the site root folder

从服务器渲染 HTML 时 - 是否有可靠的方法向 HTML 添加 <base> 元素？

HTML 文件是自动生成的，如果可以避免的话，我不想手动将<base> 标记添加到文件中。当页面被渲染时，以某种方式动态添加它会很好。

下面是 HTML：

<head>
    <title>Code coverage report for All files</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="prettify.css" />
    <link rel="stylesheet" href="base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type='text/css'>
        .coverage-summary .sorter {
            background-image: url(sort-arrow-sprite.png);
        }
    </style>
</head>

我想在使用服务器渲染时添加一个基本标签，所以它看起来像：

<head>
    <title>Code coverage report for All files</title>
    <meta charset="utf-8" />
    <base href="http://localhost:3050/coverage/lcov-report/cdt-now/index.html">  // <<<<
    <link rel="stylesheet" href="prettify.css" />
    <link rel="stylesheet" href="base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type='text/css'>
        .coverage-summary .sorter {
            background-image: url(sort-arrow-sprite.png);
        }
    </style>
</head>

我想的问题是 index.html 文件不在我项目的根目录：

但是 index.html 文件会发出相对路径请求，正如您在上面的 <head> 中使用 <link> 标记所看到的那样。

我目前正在这样渲染页面：

router.get('/', ac.allow('Admin'), function (req, res, next) {

  let html = path.resolve(__dirname + '/../coverage/lcov-report/cdt-now/index.html');

  res.setHeader('content-type', 'text/html');
  fs.createReadStream(html).pipe(res);

});

【问题讨论】：

您需要某种模板。你认识 Jade、EJS……吗？
就像我在问题中所说的那样 - 关键部分是我不控制文件 - 它是自动生成的 - 如果可以避免的话，我不想手动修改文件。跨度>
你不需要。
好的，你能解释一下吗……哈哈
我无法控制文件的生成方式 => 我对其所做的任何更改都将被覆盖。因此，我想避免将任何模板代码添加到文件中。

标签： javascript html node.js express

【解决方案1】：

因此，使用我当前将响应流式传输到浏览器的代码的方法是：

    const replacestream = require('replacestream');

    router.get('/', ac.allow('Admin'), function (req, res, next) {

      let html, val = 'coverage/lcov-report/cdt-now/index.html';

      try {
        html = path.resolve(__dirname + `/../${val}`);
        fs.existsSync(html)
      }
      catch (err) {
        return next(err);
      }

      res.setHeader('content-type', 'text/html');
      let replacement = `</title><base href="http://localhost:3050/${val}">`;

      fs.createReadStream(html).pipe(replacestream('</title>', replacement)).pipe(res);

    });

这是基本思想。

【讨论】：