Vue.js项目中prerender-spa-plugin无法渲染动态数据的问题

我之前也碰到过一模一样的问题，折腾了好一阵才捋清楚关键点，给你几个排查和解决的方向：

1. 让预渲染插件等待数据加载完成 #

prerender-spa-plugin默认会在Vue的mounted钩子触发后就生成HTML，但如果你的数据是在mounted里异步获取的，插件大概率会在数据返回前就完成渲染，自然拿不到动态内容。这时候得用插件的等待机制，指定渲染时机：

配置示例（vue.config.js/webpack配置文件） #

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/article'], // 要预渲染的具体路由
        renderer: new Renderer({
          // 方式1：等待自定义事件（最推荐）
          renderAfterDocumentEvent: 'render-ready',
          // 方式2：等待某个元素出现在DOM中
          // renderAfterElementExists: '#dynamic-content-wrapper',
          // 方式3：设置固定超时时间（应急用）
          // renderAfterTime: 3000,
          headless: false // 调试时设为false，能看到Chrome渲染过程，方便排查
        })
      })
    ]
  }
}

在Vue组件中触发等待事件 #

<!-- App.vue 或对应路由组件 -->
<template>
  <div id="dynamic-content-wrapper">{{ articleContent }}</div>
</template>

<script>
export default {
  data() {
    return {
      articleContent: ''
    }
  },
  async mounted() {
    // 模拟异步获取数据
    const res = await fetch('/api/get-article');
    const data = await res.json();
    this.articleContent = data.content;
    
    // 数据加载完成后，触发自定义事件通知插件渲染
    document.dispatchEvent(new Event('render-ready'));
  }
}
</script>

2. 检查路由模式是否兼容 #

prerender-spa-plugin只支持hash模式或者history模式下的静态路由，如果你用了/user/:id这类动态路由，插件没法预渲染所有可能的路由分支。如果是history模式，还要确保服务器配置了fallback到index.html，但预渲染阶段只能指定具体的静态路由列表。

3. 避免手动DOM操作，用Vue响应式数据绑定 #

很多人会在mounted里直接用原生DOM方法插入数据，这种操作prerender-spa-plugin是捕捉不到的，一定要用Vue的响应式数据绑定：

❌ 错误示例：

mounted() {
  fetch('/api/data').then(res => {
    document.getElementById('content').innerHTML = res.data;
  })
}

✅ 正确示例：

<template>
  <div id="content">{{ dynamicData }}</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicData: ''
    }
  },
  async mounted() {
    const res = await fetch('/api/data');
    const data = await res.json();
    this.dynamicData = data.content;
    document.dispatchEvent(new Event('render-ready'));
  }
}
</script>

4. 排查浏览器专属API的影响 #

如果代码里用到了localStorage、navigator.geolocation这类浏览器专属API，预渲染时（用的是无头Chrome）可能会抛出错误中断渲染。可以通过环境判断规避：

async mounted() {
  // 确保在浏览器环境下才执行
  if (typeof window !== 'undefined') {
    const res = await fetch('/api/data');
    // ...后续逻辑
  }
}

5. 开启调试模式看渲染过程 #

把renderer的headless设为false，预渲染时会弹出Chrome窗口，你可以直接查看控制台的报错信息，比如接口请求失败、代码语法错误等，这些都可能导致动态数据渲染失败。

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