使用nuxt.renderRoute生成的HTML页面自动重定向至404页面问题求助

背景 #

我有多个页面，其中部分页面需要通过API调用生成HTML，因此使用nuxt.renderRoute实现该功能。用户调用API并展示页面的代码如下：

fetch("article-preview-api", {pageTitle: 'Preview article'})
.then(res => res.text())
.then(html => {
  var previewWindow = window.open("","")
  previewWindow.document.write(html); 
})

问题 #

打开生成的HTML文件时，页面会自动重定向到404页面。

复现步骤 #

1. 执行npm build
2. 运行node server.js
3. 使用VSCode Live Server打开项目中的open-this-demo.html文件

预期结果 #

打开open-this-demo.html后停留在预览目标页面，显示正常内容。

实际结果 #

打开文件后页面自动跳转到404错误页面。

解决方案 #

1. 服务端renderRoute调用时指定正确的请求URL #

在服务端调用nuxt.renderRoute时，给context传入模拟的req对象，明确指定请求URL为目标路由，确保Nuxt生成的路由状态正确：

// server.js中的接口处理代码
app.get('/article-preview-api', async (req, res) => {
  // 目标路由为/preview，根据实际情况调整
  const renderResult = await nuxt.renderRoute('/preview', {
    req: {
      url: '/preview'
    },
    // 传递页面所需参数
    params: { pageTitle: req.query.pageTitle }
  })
  res.send(renderResult.html)
})

2. 修复生成HTML中的Nuxt路由状态 #

如果服务端生成的HTML中路由状态有误，可手动修改返回的HTML，强制设置正确的路由信息：

// server.js中修改返回逻辑
const renderResult = await nuxt.renderRoute('/preview', { ... })
// 将Nuxt的路由状态替换为目标路径
const fixedHtml = renderResult.html.replace(
  /window.__NUXT__=({.*?});/,
  (match, nuxtState) => {
    const parsedState = JSON.parse(nuxtState)
    parsedState.route.fullPath = '/preview'
    return `window.__NUXT__=${JSON.stringify(parsedState)};`
  }
)
res.send(fixedHtml)

3. 客户端优化HTML写入方式 #

客户端写入HTML时，确保文档加载完整后再触发Nuxt初始化，避免路由识别错误：

fetch("article-preview-api", {pageTitle: 'Preview article'})
.then(res => res.text())
.then(html => {
  const previewWindow = window.open("","")
  previewWindow.document.open()
  previewWindow.document.write(html)
  previewWindow.document.close()
  // 手动触发路由跳转，确保页面停留在目标路由
  previewWindow.addEventListener('load', () => {
    if (previewWindow.$nuxt) {
      previewWindow.$nuxt.$router.push('/preview')
    }
  })
})

内容的提问来源于stack exchange，提问作者Xiao