构建Vue SSR项目时出现renderPage is not a function报错如何解决

• 首先修正路径引用问题，你当前使用相对路径../dist定位构建产物非常容易受启动脚本的执行目录影响，建议改为绝对路径：

  const dist = path.resolve(__dirname, '../dist')
  

  所有文件引用都通过path.join拼接，避免跨平台路径符号不兼容问题。
• 检查node-fetch依赖版本，node-fetch@3及以上版本仅支持ESM导入规范，你当前使用CommonJS的require语法调用会直接报错，两个解决方案二选一：
  1. 降级node-fetch到2.x版本：npm i node-fetch@2
  2. 在启动脚本所在目录的package.json中添加"type": "module"，将所有require语法替换为ESModule的import语法
• 验证构建配置正确性：
  1. 客户端构建命令必须添加--ssrManifest参数才会生成ssr-manifest.json，正确命令参考：vite build --outDir dist/client --ssrManifest
  2. 服务端构建命令需要明确指定服务端入口，正确命令参考：vite build --ssr src/entry-server.js --outDir dist/server
  3. 确认构建后的dist/server/package.json中存在ssr.assets字段，dist/client目录下存在ssr-manifest.json文件
• 补充SSR渲染错误捕获逻辑，你当前的路由处理没有异常捕获，渲染出错时不会打印具体报错信息，修改代码如下：

  server.get('*', async (request, response) => {
    try {
      const url = request.protocol + '://' + request.get('host') + request.originalUrl;
      const { html } = await renderPage(url, {
          manifest,
          preload: true,
          request,
          response
      });
      response.end(html);
    } catch (err) {
      console.error('SSR渲染错误详情：', err);
      response.status(500).end('服务端渲染出错');
    }
  });
  

• 补充静态资源兜底处理，仅遍历assets数组可能会遗漏部分资源，添加全局静态资源中间件：

  // 放在路由处理之前
  server.use(express.static(path.join(dist, 'client'), {
    maxAge: '24h',
    index: false // 禁止默认返回client目录下的index.html，避免跳过SSR逻辑
  }))
  

• 确认服务端入口导出格式正确，你的src/entry-server.js必须default导出一个返回{ html }结构的render函数，否则require(${dist}/server)时会拿到undefined，调用时报错。
• 如果项目用到了异步请求、状态管理库（如Pinia/Vuex），需要确认服务端渲染前已经完成所有异步逻辑的执行，否则返回的HTML会缺少动态内容。

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