当前位置：首页 > VUE

vue预渲染实现

2026-01-18 00:09:54VUE

预渲染的基本概念

预渲染（Prerendering）是一种在构建阶段生成静态HTML页面的技术，适用于内容变化不频繁的页面。与服务器端渲染（SSR）不同，预渲染在构建时完成，无需实时服务器处理。

Vue预渲染的实现方法

使用prerender-spa-plugin

prerender-spa-plugin是Vue中常用的预渲染插件，基于Puppeteer实现。

安装依赖：

npm install prerender-spa-plugin puppeteer --save-dev

配置vue.config.js：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'],
        renderer: new Renderer({
          inject: {},
          headless: false,
          renderAfterDocumentEvent: 'render-event'
        })
      })
    ]
  }
};

在main.js中触发渲染事件：

new Vue({
  router,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  }
}).$mount('#app');

使用vue-cli-plugin-prerender

对于Vue CLI项目，可以使用专用插件：

安装插件：

vue add prerender-spa

配置插件选项：

// package.json
{
  "plugins": {
    "prerender-spa": {
      "routes": ["/", "/about"],
      "renderOptions": {
        "headless": true
      }
    }
  }
}

动态路由处理

对于动态路由，需要预先确定所有可能的路径：

// vue.config.js
const dynamicRoutes = ['/product/1', '/product/2', '/product/3'];

module.exports = {
  plugins: [
    new PrerenderSPAPlugin({
      routes: dynamicRoutes
    })
  ]
}

预渲染优化技巧

设置合适的等待时间确保内容加载完成：

renderer: new Renderer({
  renderAfterTime: 5000 // 等待5秒
})

处理异步数据：

// 在组件中
async asyncData() {
  const data = await fetchData();
  return { data };
},
mounted() {
  this.$nextTick(() => {
    document.dispatchEvent(new Event('render-event'));
  });
}