使用prerender-spa-plugin预渲染Vue项目后，dist中index.html显示undefined

我之前也碰到过一模一样的问题，预渲染后dist里的HTML只显示"undefined"，大概率是配置、路由或者组件逻辑层面的坑，给你几个排查和解决的方向：

1. 先确认路由模式是否正确 #

prerender-spa-plugin 强制要求Vue项目使用 history模式，hash模式下预渲染完全无法正常工作。打开src/router/index.js核对：

const router = new VueRouter({
  mode: 'history', // 必须是history，不能是hash
  routes: [...]
})

另外，预渲染配置里的routes数组必须和你实际的静态路由完全匹配，比如配置了['/', '/about']，那路由里就得有对应的路径，动态路由（比如/user/:id）预渲染不支持，要么改成静态路径，要么单独处理。

2. 核对prerender-spa-plugin的核心配置 #

如果是vue-cli3+项目，配置一般在vue.config.js里，重点检查这几个关键参数：

• routes：不能有拼写错误，必须是你要预渲染的静态路由数组
• staticDir：指向项目的静态资源目录，vue-cli3+默认是public，旧版是static
• renderer里的renderAfterDocumentEvent：必须和你main.js里触发的事件对应

给你一个标准的配置示例：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'public'),
        outputDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about'],
        renderer: new Renderer({
          headless: true,
          renderAfterDocumentEvent: 'render-event' // 和main.js里的事件名一致
        })
      })
    ]
  }
}

同时必须在main.js里手动触发这个事件，告诉预渲染器页面已经渲染完成：

new Vue({
  router,
  render: h => h(App),
  mounted() {
    // 触发事件，通知预渲染器可以生成HTML了
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

如果没加这一步，预渲染会在页面还没渲染好的时候就生成HTML，自然会出现undefined或者空内容。

3. 检查组件里的异步操作 #

如果你的页面组件在mounted/created里有异步请求（比如调用API拿数据），预渲染的Puppeteer可能还没等到数据返回就生成了HTML，这时候绑定的变量就会显示undefined。

解决办法：

• 把异步请求放在beforeMount里，或者在数据加载完成后再触发render-event：

async mounted() {
  await this.fetchPageData() // 等待数据请求完成
  document.dispatchEvent(new Event('render-event'))
}

• 也可以用renderAfterTime给预渲染器加个延迟（比如renderAfterTime: 1000），但这种方式不如事件触发可靠。

4. 检查插件版本兼容性 #

如果你的vue-cli是4.x/5.x版本，旧版的prerender-spa-plugin可能有兼容性问题，建议换成维护更活跃的分支：

npm uninstall prerender-spa-plugin
npm install @dreysolano/prerender-spa-plugin --save-dev

然后修改vue.config.js里的引入路径：

const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')

5. 查看构建日志找线索 #

执行npm run build的时候，仔细看控制台的输出，如果有报错（比如路由找不到、Puppeteer启动失败），这些都会导致预渲染失败，生成异常的HTML。

比如Puppeteer无法启动的话，可以手动指定Chrome的路径：

renderer: new Renderer({
  headless: true,
  executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', // Mac示例
  // Windows示例：'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
  renderAfterDocumentEvent: 'render-event'
})

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