在服务器端渲染上dynamic修改<base>标记
我正在寻找如何获得一个HTML页面的基础URL，以便来自浏览器的相对URL请求使用该基础。
下面是答案定义网站根文件夹中的文件夹中的HTML根目录
从服务器呈现HTML时 – 是否有可靠的方法将一个<base>元素添加到HTML中？
该HTML文件是自动生成的，我不想手动添加<base>标签到文件，如果我能避免它。 当页面被渲染时，以某种方式dynamic添加它将会很好。
所以这里是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文件不在我的项目的根目录：
但是，您可以使用上面的<head>的<link>标记来看到index.html文件生成相对path请求。
我目前正在像这样渲染页面：
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); });
所以使用我的当前代码将响应传递给浏览器的方法是：
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); });
这是基本的想法。